Если вы пробовали уже разобраться, что же там написано в файле style.css, то наверняка обратили внимание на то, что шрифты чаще всего указываются не по-отдельности, а целыми семьями – font-family. В веб-дизайне все стандартные шрифты условно поделены на несколько семей. Это дает возможность браузеру самостоятельно определять, какой шрифт использовать для отображения текста, исходя из того, к какому семейству он относится. Для чего то сделано?
Все элементарно: в каждой операционной системе имеется свой набор установленных шрифтов, и эти шрифты могут не совпадать. Например, в Windows есть шрифты, которых нет в Linux, и наоборот. Если указать какой-то конкретный шрифт, используемый в Windows, например, Segoe UI Light, то еще не факт, что этот шрифт есть в Ubuntu. Поэтому может получиться так, что браузер не сможет определить, каким шрифтом отображать текст, и выведет вместо него какие-нибудь квадратики. Чтобы такого не получилось, все шрифты условно разделили на несколько семейств:
- serif
- sans-serif
- cursive
- fantasy
- monospace
Например, к семейству шрифтов sans-serif относятся:
- Garamond
- Georgia
- New York
- Times
- Times New Roman
Один из этих шрифтов встречается во всех операционных системах, поэтому использование семейства шрифтов sans-serif гарантирует, что текст во всех операционных системах будет отображен более-менее правильно и будет иметь похожий вид (классический шрифт без засечек).
Однако сейчас, в эпоху разнообразия и нестандартных подходов, все больше веб-мастеров применяют не классические варианты шрифтов. Есть несколько способов, обеспечивающих совместимость шрифтов в разных операционных системах. Одним из них является jQuery-скрипт Cufon, другим – использование Google Web Fonts. Но, благодаря все более широкому применению разметки HTML5, есть и третий способ – внедрение вообще любых пользовательских шрифтов.
Предположим, вам очень нравится шрифт somefont (название вымышленное). С помощью специальной разметки вы можете внедрить его в блог, причем он будет отображаться в любом браузере и любой операционной системе.
01 Для этого закачайте его в блог в доступную папку, например, fonts.
02 Внедрите в файл style.css этот шрифт:
@font-face{
font-family:somefont;
src:url('/www/wp-content/themes/папка-вашей-темы/fonts/somefont.ttf') format ("truetype");
}
03 После этого можете использовать шрифт somefont для выделения определенного текста. Например, для заголовков H1:
h1 {font-family:somefont;}
Оставить комментарий