Блог Андрія Огороднікова Хто з мечем до нас прийде, від меча й загине.

Экспериментирую со шрифтами блога

16.04.2017, 07:07

[не очень актуально]

—=•=·•·=•=—

Как всегда. Пользуясь случаем и настроением, конечно, я стал копаться и в собственной-несобственной теме «Либрио», [некогда] установленной здесь на блоге. В очередной раз удивляюсь своей лениво-пофигительной заторможенности в этом вопросе. Еще давно (!), наблюдая свои сайты под линуксом, я ужасался тому, как отображаются тексты — т.е. какие шрифты применяются не в виндоусе. Какие попало, разной степени кособокой страшности…

Тема создана с использованием стандартных виндовых шрифтов, которые установлены у всех. Verdana — для текста общего назначения и Trebuchet MS — для заголовков. Естественно, в альтернативных операционных системах об этих шрифтах слыхом не слыхивали.

Оправданием мне служит лишь то, что в мире всего 2% пользователей линукса и неизмеримо малое количество пользователей прочих ОС. Чуть больший процент у Маков, но основным посетителем остается гвардия виндузятников, к которой принадлежу и я грешный.

Есть два пути для достижения одинаковости отображения текста (оба требуют дополнительного трафика, подгрузки шрифтов):

1. Загрузить в локальную папку на серваке файлы шрифтов и подгружать их на комп читателя с помощью правила CSS @font-face:

@font-face {
font-family: Limpopo; src: url(/fonts/limpopopopopo.ttf);
/* Лучше, конечно, давать полный путь с http://avo... */
}

Но есть проблема с браузерами — даже с 9-м Ослом и даже с почитаемой многими [древней] Оперой…

(Вообще это большая лужа, каждый браузер что-то — да трактует по своему, что-то — да не поддерживает, из-за этого могут случаться накладки, например, можно успешно создавать слайдеры (сменяемые попеременно фотки) без применения джава-скриптов, в чистом CSS3, но ишак и опера ни в какую не хотят это отображать. Тогда как Файрфокс и Хром — без проблем.)

2. Использовать веб-шрифты Гугла. Как всегда, кириллица находится на отшибе. 531 шрифт существует для латиницы и только 36 для кириллицы, из которых реально пользоваться можно лишь дюжиной.

Выбрав подходящий шрифт — Quick-use или Add to collection + кнопка Use внизу — получаем на выходе вот такую строчку:

<link href='http://fonts.googleapis.com/css?family=Oranienbaum&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>

Которую нужно поместить до закрывающего тега </head>в нужном файле .html (или header.php шкурки).

А в стилях CSS, где надо, указывать: font-family: 'Oranienbaum', serif;

Это позволит гуглосервису подгружать необходимый для отображения шрифт — для любого современного браузера, для любой платформы.

Ну, вот, я решил попробовать здесь знакомый мне ранее шрифт Ubuntu, созданный в рамках известного линукс-проекта. Шрифт этот хорош для обычного использования (текстовая работа оффлайн), он приятен по дизайну и отлично читабелен, но для блога… я пока не уверен…

Другая проблема в том, что подходящей замены для титульного =Trebuchet MS= я не вижу, а шрифт этот мне нравится. Но он не свободен ни капли…

А для цитат (чужого, выделяемого специально текста, см. предыдущий пост) я заменил Times new Roman шрифтом PT Serif Caption, созданным известной шрифтовой фирмой Паратайп — как один из шрифтов для общедоступного использования в вебе и не вебе. Я когда-то об этом упоминал, лень искать тот пост. Но ссылка на страницу проекта вот. [Паратайпа здесь больше нет].

Шрифт мне понравился. Рекомендую также и остальные шрифты семейства: PT Sans и PT Mono. Первый использовал в строке навигации (Нoме, About итд)+ сайдбар тоже.., второй в «коде», см. выше по посту.

Подкованный читатель заметит, что существуют еще «хранилища» шрифтов. Например, fontdeck.com и typekit.com. Но там за удовольствие надо платить. А с кириллическими шрифтами та же унылая беспросветность.

Жаль, что Гугл мало уделяет внимания кириллическому шрифтовому сегменту. Думаю, не было бы проблем, если бы выбор хороших свободных и чистых лицензионно шрифтов был бы шире…

Короче, снова я ставлю перед собой вопрос. И попробую его решить.

P.S. Потихоньку привыкаю к Ubuntu font…

P.P.S. Итого: Ubuntu применяется к заголовкам постов, тексту постов, титульному заголовку блога, ссылкам «древнее=свежее»;

PT Sans я решил использовать для заголовков постов. Неплохо.

PT Sans Caption — к заголовкам и ссылкам сайдбара, главной страничной навигации, навигации между постами, инфо-плашке после поста;

PT Serif Caption — к тексту в тегах <blockquote>

PT Mono в тегах <code>

Сдержанно удовлетворен :)

Но раздумья не прекращаются…

[Для порядку скажу, на 2017 год, на блоге задействован с гуглошрифтов как единый основной Ubuntu; для цитат используется Georgia или любой другой serif, а для кодов Consolas или любой другой monospace, который предложит система посетителя, они не подгружаются. Я решил, что это оптимум. … Но рука не поднялась эту мутную записку уничтожить, веха, как-никак.]