Переклад статті " Say No to Faux Bold "З журналу A List Apart , Автор - Alan Stearns , Перекладач - GreatRash
Браузери можуть витворяти жахливі речі з текстом. Якщо текст стилізований як жирний або курсив, але в даному шрифті відсутня жирне або курсивне накреслення, то браузери компенсують їх відсутність, намагаючись створити подібне накреслення самостійно. В результаті ми спостерігаємо незграбну спробу наслідування справжньому шрифтового дизайну. У цій статті ви дізнаєтеся кілька шляхів уникнути подібної проблеми.
Ви не можете звинувачувати браузер за те, що він намагається компенсувати відсутність потрібного накреслення. Якщо текст повинен бути жирним або курсивним, але в шрифті немає необхідних даних для цього браузер повинен зробити хоч щось. Таким чином жирний виглядає як потовщена версія звичайних гліфів, а щоб отримати курсив браузер просто нахиляє літери. Те що побачить кінцевий користувач буде виглядати краще або гірше залежно від браузера, який він використовує і шрифту який використовуєте ви. Деякі браузери, такі як Firefox, роблять більш жирні мазки у жирного тексту, роблячи місиво з тексту на екрані. Інші браузери, такі як Chrome, лише трохи утолщают мазки, в результаті іноді неможливо відрізнити жирний текст від нормального. Жодне з цих помилкових накреслень навіть близько не схоже на те, що видає справжній шрифт.
Ці штучні стилі шрифту не є проблемою для безпечних веб-шрифтів, в більшість яких вже включені стилі для жирного і курсиву. Але, останнім часом, з'являються все більше і більше сайтів з помилковим жирним, іноді від дизайнерів які мали б знати і знають проблему краще за інших. У всіх випадках на обличчя неправильне використання шрифтів. Або у шрифту як такого немає жирного або курсиву, або властивість @ font-face проставлено некоректно. Від подібних проблем можна позбутися. Не дозволяйте помилковому жирному з'явитися на вашому сайті.
Заголовки і єдине накреслення вигляду шрифтів
Уявімо, що вам захотілося використовувати якийсь яскравий шрифт для ваших заголовків. Можливо вам сподобається шрифт Diplomata , Який можна знайти на сайті Google Web Fonts. Слідуючи інструкціям нижче ви можете підключити його для ваших елементів h1:
<Link href = "http://fonts.googleapis.com/css?family=Diplomata" rel = "stylesheet" type = "text / css"> <style> h1 {font-family: 'Diplomata', serif; } </ Style> <h1> Yikes!
Що дасть подібний результат в Firefox:
Мал. 1: Diplomata в хибному жирному накресленні
Dipomata містить тільки одне зображення, тому правило @ font-face, код якого ви отримуєте, містить налаштування font-face: normal ;. Однак, так як в заголовки зазвичай за умовчанням мають font-weight: bold; браузер розмазує гліфи в спробі емулювати жирне накреслення. У передперегляді шрифту ви могли бачити елегантні смуги в штрихах букв і він вже мав чесне жирне накреслення. Помилковий жирний, створений браузером, майже знищив подібні деталі.
Ви можете виправити подібну поведінку Diplomata, додавши font-weight: normal; для h1. Але це буде не дуже хорошим рішенням в разі коли шрифт недоступний і вам потрібно деградувати в дефолтного списку шрифтів. Кращим рішенням буде додавання ще одного правила @ font-face для шрифтів з єдиним зображенням, що показує, що даний шрифт може використовуватися як для нормального тексту, так і для жирного. Таким чином ви отримаєте нормальний накреслення вашого шрифту в заголовках і жирне, в разі його відсутності і заміни стандартним шрифтом.
Якщо ви перейдете по посиланню на шрифт Diplomata, використовуючи браузер Internet Explorer, то побачите кросбраузерності код @ font-face, наданий Google. Ви можете скопіювати цей код собі, змінивши властивість font-weight на bold.
<Link href = "http://fonts.googleapis.com/css?family=Diplomata" rel = "stylesheet" type = "text / css"> <style> @ font-face {font-family: 'Diplomata'; font-style: normal; font-weight: bold; src: url ( 'http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot'); src: local ( 'Diplomata'), local ( 'Diplomata-Regular'), url ( 'http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kPY6323mHUZFJMgTvxaG2iE.eot') format ( 'embedded -opentype '), url (' http://themes.googleusercontent.com/static/fonts/diplomata/v1/8UgOK_RUxkBbV-q561I6kD8E0i7KZn-EPnyo3HZu7kw.woff ') format (' woff '); } H1 {font-family: 'Diplomata', serif; } </ Style> <h1> Yikes!
Це збереже дизайн обраного шрифту:
Мал. 2: Diplomata без помилкового жирного накреслення
Так як Diplomata сам по собі жирний, він підходить для заголовків в нормальному вигляді. Якщо замість нього буде використаний інший шрифт зі списку, заголовки все одно залишаться жирними. Трюк з дублюванням @ font-face спрацює і з іншими шрифтовими сервісами. У своєму прикладі, я продублював правило, яке використовує Google, але якщо ви самі складаєте ваше правило, то, можливо, ви захочете перевірити @ font-face, запропонований такими сервісами як FontSpring , Font Squirrel або Paul Irish . Якщо на вашому сайті використовується шрифт з єдиним зображенням, то ви можете уникнути проблеми помилкового жирного шляхом додавання додаткового правила @ font-face.
Врахуйте, що специфікація CSS3-Fonts визначає властивість font-synthesis, за допомогою якого можна контролювати чи потрібно використовувати помилковий жирний або помилковий курсив, використовуючи одне правило @ font-face. Але, в даний час, жоден браузер не реалізував підтримку цієї властивості. Дублювання правил @ font-face - єдиний спосіб контролювати подібна поведінка в браузерах.
Чи не обманитесь, відсутністю жирного або курсиву
Проблема відсутності жирного або курсиву не обмежується тільки шрифтами з єдиним зображенням. Большенство шрифтових веб-сервісів дозволяють вам спеціально видалити додаткові накреслення. Схоже, що деякі з них покладаються на використання штучних накреслень, інші ж виставляють для правила @ font-face тільки нормальну вагу і стиль або включають тільки одне зображення за замовчуванням.
Наприклад візьмемо шрифт Lora , Що надається Google Web Fonts. Якщо ви підете дефолтних рекомендацій щодо впровадження шрифту, то ви отримаєте тільки одне зображення, що дасть вам наступні результати в браузері Chrome для тексту, укладеного в <strong> і <cite>
Мал. 3: Lora в хибному жирному і хибному курсивном зображенні
На перший погляд це виглядає не так погано як слово «Yikes!», Використане вище, але ви можете помітити що жирний текст не такий вже і жирний, а курсив виглядає зовсім не як закруглені елегантні гліфи на сторінці з прикладами накреслень Lora. Ваш текст може включати стилізацію жирним або курсивом, явну або неявну, але в разі відсутності таких накреслень в справу вступить браузер. А ось що ви хотіли б отримати насправді:
Мал. 4: Справжнє жирне і курсивне накреслення шрифту Lora
Інтерфейс Google Fonts попереджає користувача не включати занадто багато стилів. Ось дефолние настройки для шрифту Lora де стрілка вказує на жовте поле, показуючи, що все в порядку.
Мал. 5: Шрифтової веб-інтерфейс з дефолтними налаштуваннями
Якщо вам трапиться з'ясувати, що ви отримуєте на виході зовсім не те, що ви бачили на сторінці з прикладами, ви можете вирішити підключити додаткові стилі, стрілка при цьому переповзе на червоне поле.
Мал. 6: Шрифтової веб-інтерфейс зі страшною червоною шкалою
Якщо ви не впевнені в необхідності додаткових стилів, шкала може ввести вас в оману: ви можете подумати, що ви робите щось не те, підключаючи їх! Що, власне, спонукає вас покладатися на розмиті і скошені тексти замість реальних стилів, що надаються шрифтом.
Я не пропоную вам покладатися тільки на сервіс Google Web Fonts. Але, по крайней мере, якщо ви відзначите там потрібні галки для жирного і курсиву цей сервіс запропонує вам коректно сформований правило @ font-face. Деякі інші шрифтові веб-сервіси пропонують окреме правило @ font-face для кожного з накреслень шрифту в сімействі, кожне правило налаштоване на font-weight: normal ;. Це може стати причиною всіх тих проблем, які я описав у статті, незважаючи на те, що жирне і курсивне зображення присутнє в шрифті.
Отже, коли ви користуєтеся веб-сервісами для впровадження шрифтів, не полінуйтеся перевірити як вони відображаються в різних браузерах. щоб упевнитися, що ви отримали саме те, на що розраховували. Переконайтеся, що ваші правила @ font-face відповідають вазі і стилю потрібного шрифту, і що у вас є @ font-face для кажного з використовуваних накреслень. Не покладайтеся сліпо на той код, який пропонує вам веб-сервіс. Якщо ви витратили час на вибір красивого кшріфта для вашого сайту, переконайтеся, що ви використовуєте саме можливості шрифту, а не браузера при стилізації тексту.
Переклад статті Say No to Faux Bold автора Alan Stearns
PS Це теж може бути цікаво:
Com/css?Com/css?
