Использование нестандартных шрифтов для оформления текста блога

Опубликовано: 01.09.2018

Один из способов внедрения любых нестандартных шрифтов для оформления текста блога.

Если вы пробовали уже разобраться, что же там написано в файле 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 ; }