Как подключить текст в css
Перейти к содержимому

Как подключить текст в css

  • автор:

Как использовать вариативные шрифты в реальном мире

Использовать вариативные шрифты в реальном мире не так-то легко, как оказалось. Эта статья поясняет, как мы справились с этим на новом сайте Ampersand и что мы узнали за это время.

Вариативный шрифт — один файл шрифта, который умеет вести себя, как много разных (более развёрнуто об этом можете прочитать в отрывке моей книги «Веб-типографика»). Уже немало сайтов продемонстрировали возможности вариативных шрифтов и самой технологии управления шрифтом в их основе, но для нового сайта конференции Ampersand я хотел показать, как вариативные шрифты используются на реальном сайте. Возможно, это будет первый коммерческий сайт, который когда-либо сделал это.

Вариативные шрифты в действии на сайте Ampersand

Пару месяцев назад поддержка браузерами вариативных шрифтов была всего лишь 7%, но сегодня она составляет уже свыше 60%. А это значит, что технологию управления шрифтом уже можно использовать прямо сейчас. Но не вся поддержка одинакова, как будет видно.

Софта с поддержкой вариативных шрифтов уже на удивление много. К примеру, последние версии Photoshop и Illustrator поддерживают вариативность шрифта, и если у вас macOS 10.13+ или iOS 11+, то системный шрифт San Francisco широко использует управление шрифтом. Тем не менее, доступных шрифтов для использования крайне мало. Коммерческих вариативных шрифтов пока что крайне мало (Dunbar and Fit — яркие исключения) , но есть растущее число бесплатных и экспериментальных вариативных шрифтов, они представлены в интерактивной песочнице Axis Praxis.

Из этой ограниченной палитры шрифтов мы (точнее, дизайнер Clearleft Джеймс Гилиед) выбрали Mutator Sans для декоративного текста и Source Sans для основного текста, чтобы получился дизайн в манере Сола Басса. В обоих шрифтах нам доступна шкала изменения жирности. Шрифты выбраны, теперь пошёл сложный, многоэтапный процесс реализации их вариативности на сайте. Я покажу вам весь путь, который нам (точнее, разработчику Clearleft Марк Перкинс) пришлось пройти, используя упрощённые фрагменты кода.

1. Подключаем шрифты

Заставить ваши вариативные шрифты работать в базовой форме достаточно легко. На сегодня только у Safari наиболее полная поддержка. И это то, с чего следует начинать.

Мы скачали вариативный шрифт Source Sans с его домашней страницы на Github и использовали @font-face с форматом truetype-variations, чтобы его подключить:

@font-face

Затем мы могли бы установить вариативный шрифт Source Sans в качестве основного шрифта для страницы обычным способом:

html

2. Установка жирности

Вариативные шрифты в CSS реализованы так, чтобы использовать существующие свойства для определенных зарегистрированных изменяемых параметров. Для основного текста этого дизайна используется три варианта жирности: regular , semibold и black . Мы установили жирные шрифты с помощью обычного font-weight .

.hero < font-weight: 900; >.blurb

С вариативными шрифтами жирность больше не ограничена интервалом 100. Теперь можно брать любое целое число в диапазоне 1-999. Для главного заголовка набранного Mutator Sans мы использовали тонкие различия в жирности для каждой буквы, чтобы дизайн сильнее производил впечатление нарисованного от руки.

b:nth-child(1) < font-weight: 300; >b:nth-child(2) < font-weight: 250; >b:nth-child(3)

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

3. Чиним браузеры кроме Safari

Кода выше достаточно, чтобы Safari работал как надо. Он показывает, как правильно делать (и как это будет делаться в будущем).

Chrome 62+, Firefox 57+ и Edge 17+ уже поддерживают вариативные шрифты (Firefox только на Mac, и если установить правильный флаг). Однако, ни один из предыдущих примеров кода в них не работает.

Начнём с того, что ни один из трёх браузеров не понимает format(‘truetype-variations’) , и шрифт в них вовсе игнорируется. Решение — добавить другое свойство в правило @font-face . Оно ссылается на тот же самый файл шрифта, но с обычным format :

@font-face

Позже мы увидим, что это решение вызывает другую проблему, но пока что мы просто заставили вариативный шрифт работать во всех браузерах кроме Safari.

Затем нужно отобразить шрифт с разными жирностями. Оказывается, эти браузеры всё ещё не поддерживают font-weight с вариативными шрифтами. Поэтому мы прибегли к свойству font-variation-settings с его четырехбуквенными обозначениями параметров.

.hero

Это привело к другой проблеме. Поскольку font-variation-settings — «низкоуровневое» свойство, на него влияет font-weight , в результате к шрифту с уже увеличенной жирностью применяется еще и «ложная жирность». Поэтому пока уберём font-weight .

.hero

4. Вырезаем подмножество и создаем WOFF2

Вариативный шрифт Source Sans довольно большой: файл TrueType весит аж 491 кБ. В основном из-за того, что он содержит около 2000 знаков, включая греческий алфавит, кириллицу, разные варианты букв и символы. Первым делом, чтобы уменьшить размер файла, нужно создать подмножество и избавить шрифт от заведомо не нужных нам символов.

Мы тщательно подошли к выбору того, что оставить в шрифте, и в итоге ограничились диапазонами символов «Базовая латиница», «Дополнение латиницы — 1» и «Расширенная латиница — A»: в общем, около 400 знаков, покрывающих большинство европейских языков и пунктуацию. В терминах юникода это U+0020–007F, U+00A0–00FF и U+0100–017F.

Есть множество онлайн-инструментов для вырезания подмножества из шрифтов. К примеру, Fontsquirrel. Однако, все инструменты, которые я пробовал, удаляли данные вариативности. А значит, командная строка нам в помощь. Мы вырезали подмножество из этого шрифта с помощью опенсорсной программы pyftsubset , компонента fonttools (смотрите руководство Майкла Херолда). Если ваш выбор — Node, то тогда лучше использовать Glyphhanger.

Как Glyphhanger, так и fonttools (если у вас также установлено сжатие Brotli) вернут файл с вырезанным подмножеством формата WOFF2. Нам не нужен обычный WOFF, поскольку все браузеры с поддержкой вариативных шрифтов также поддерживают превосходный WOFF2.

После вырезания подмножества и конвертации в WOFF2 у нас получился на удивление крошечный файл в 29 кБ. Мы поправили @font-face соответственно:

@font-face

Так задача решается для браузеров с поддержкой вариативных шрифтов — надеюсь, что обходные пути вскоре не потребуются. Так или иначе, это всё ещё половина истории.

5. Шрифты для несовместимых браузеров

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

Для решения этой проблемы нужно использовать невариативные (одностилевые) шрифты для этих браузеров. Это будет работать, если сначала указать ссылку на одностилевые файлы шрифта в @font-face (как обычно), содержащий жирность шрифта, а после добавить в это же правило ссылку на вариативный.

@font-face < font-family: 'SourceSans'; src: url('source-sans-variable.woff2') format('woff2-variations'), url('source-sans-regular.woff2') format('woff2'); font-weight: 400; >@font-face

Браузеры с поддержкой вариативных шрифтов скачают (единожды) файл, помеченный как format(‘woff2-variations’), а остальные браузеры получат одностилевые шрифты помеченные как» format(‘woff2’) .

Три одностилевых текстовых шрифта весят 47 кб, что на 62% больше одного файла с вариативным шрифтом.

Ранее я упоминал, что только Safari поддерживает format(‘woff2-variations’) . Так что, если мы хотим отдать вариативный шрифт другим браузерам с его поддержкой, предыдущий код спутает нам все карты. Поэтому мы прибегли к другой тактике, ради которой кода понадобилось побольше. Во-первых, мы дали вариативному и одностилевому шрифту разные имена файлов, отделив таким образом ссылки на них.

@font-face < font-family: 'SourceSansVariable'; src: url('source-sans-variable.woff2') format('woff2-variations'), url('source-sans-variable.woff2') format('woff2'); >@font-face < font-family: 'SourceSans'; src: url('source-sans-black.woff2') format('woff2'), url('source-sans-black.woff') format('woff'); font-weight: 900; >@font-face

Затем нам понадобилось правило @supports, чтобы гарантировать, что нужный шрифт попал нужному браузеру:

html < font-family: 'SourceSans' sans-serif; >@supports (font-variation-settings: "wght" 400) < html < font-family: 'SourceSansVariable', sans-serif; >>

В предыдущем коде одностилевые шрифты указывались как стандартные, однако, если браузер поддерживает вариативные шрифты (судя по поддержке font-variation-settings , логично предположить, что они там работают), то он получит вариативный шрифт.

Здесь мы возвращаемся к самым жирным вариантам. Если вы помните, мы заменили font-weight на font-variation-settings , чтобы во всех браузерах кроме Safari можно было выбирать жирность. Как можно заметить, из-за такой замены в браузерах без поддержки вариативных шрифтов правильная жирность также не отобразится. Поэтому нам нужно вернуть обратно font-weight в другом правиле @supports :

.hero < font-weight: 900; >@supports (font-variation-settings: "wght" 900;) < .hero < font-variation-settings: "wght" 900; font-weight: normal; >>

И последнее. Ради перестраховки, каждый раз при использовании вариативных шрифтов вам следует явно устанавливать жирность шрифта, если вам нужна жирность 400 или normal . Каждый браузер отображает внешний вид вариативного шрифта по умолчанию слегка по-своему. Во время нашего тестирования Firefox отображал текст по умолчанию значительно светлее чем Safari и Chrome, пока мы не сделали это:

html < font-family: 'SourceSans' sans-serif; font-weight: 400; >@supports (font-variation-settings: "wght" 400) < html < font-family: 'SourceSansVariable', sans-serif; font-variation-settings: "wght" 400; >>

Вот и всё. Посмотрите, как всё это вместе выглядит на сайте Ampersand, и помните, что Ampersand — это конференция, посвящённая типографике в вебе. Если вам это по душе, то, возможно, вам стоит туда заглянуть. Там будет много обсуждений вариативных шрифтов, и многое другое.

P.S. Это тоже может быть интересно:
  • Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами
  • Не боритесь с каскадом, управляйте им!
  • Каскадные слои уже почти стандарт!

Если вам понравилась статья, поделитесь ей!

Создание сайта-визитки. Подключение шрифтов на сайт

В этом уроке мы начнем создавать сайт-визитку. Начнем мы с шапки сайта, которая будет для всех страниц. Так же в этом уроке я покажу, как подключить сторонние шрифты на сайт, используя google fonts и webfont.ru

Следует отметить, что есть список стандартных шрифтов:
1. Arial
2. Verdana
3. Times
4. Times New Roman
5. Georgia
6. Trebuchet MS
7. Sans
8. Sans
9. Comic Sans MS
10. Courier New
11. Webdings
12. Garamond
13. Helvetica

Еще есть стандартные шрифты, которые могут быть недоступны в некоторых ОС.
1. Palatino Linotype / Palatino
2. Tahoma
3. Impact
4. Century Gothic
5. Arial Black
6. Arial Narrow
7. Copperplate / Copperplate Gothic Light
8. Gill Sans / Gill Sans MT

Еще в этом уроке я рассказал как убрать отступы браузера по умолчанию. Для этого следует использовать специальный css файл, который сбрасывает правила для тэгов, приводя вид документа всех браузеров «к общему знаменателю» — normalize.css

Код урока (HTML)

Document —>

123-45-67

Использование нестандартных шрифтов на сайте WordPress

Использование нестандартных шрифтов на сайте @font-face

Вообще, хотелось бы сказать, что использование нестандартных шрифтов на сайте — крайне не желательно. И пичкать сайт всеми шрифтами из Photoshop — грубая ошибка дизайнера, которая указывает на его неопытность, как мне кажется. Сайт красивее от этого совсем не становится, но зато вылезают сложности с отображением шрифтов в разных браузерах. Способ подключения нестандартного шрифта на сайт, который я опишу ниже хорош тем, что он отлично работает в популярных браузерах.

Недавно взялся верстать шаблон для WordPress по заказу, и как раз, столкнулся с проблемой внедрения нестандартных шрифтов на сайт. Хотя задача не столь сложная, как как мне показалось на первый взгляд, но потратил я немало времени на поиски ее решения. На самом деле, как выяснилось, есть сразу несколько способов подключить нестандартный шрифт на сайт, но самым эффективным и простым в моем случае оказался способ подключения шрифта к сайту с помощью CSS.

Подключение нестандартных шрифтов с помощью CSS

Для того чтобы использовать нестандартный шрифт на сайте, нужно его скачать. Я нашел вот такой отличный каталог шрифтов для сайта . Там вы сможете найти и скачать необходимый вам шрифт. Хотелось бы заметить, что существует несколько форматов шрифтов. Для подключения шрифта с помощью CSS советую скачивать шрифт в формате ttf.

Если вы уже нашли и скачали шрифт, то уже можно подключить шрифт к сайту. Для этого загрузите файл шрифта по ftp на сайт , например в папку вашей темы. Затем в папке вашей темы найдите файл style.css и откройте его для редактирования. Добавьте следующий код в ваш файл style.css и отредактируйте.

@font-face < font-family: Archangel; /* имя шрифта для CSS правил */ src: local("Archangel"), /* проверяем наличие шрифта в ОС пользователя */ url(/wp-content/themes/mytheme/42852.ttf); /* если шрифт не установлен, тогда загружаем его по указанному пути */ >

Я думаю стоит немного пояснить этот код.

font-family: Archangel;

Этой строкой вы задаете правило для CSS, с помощью которого вы сможете в дальнейшем назначить определенному элементу нужный вам шрифт.

src: local("Archangel"),

Эта строка проверяет наличие шрифта в операционной системе пользователя, и если шрифт отсутствует, то шрифт подгружается из папки вашей темы.

url(/wp-content/themes/mytheme/42852.ttf);

Эта строка указывает путь к файлу шрифта для его загрузки на машину пользователя. Естественно, что 42852.ttf — это имя файла шрифта с расширением. Расширение указывать обязательно.

Таким образом вы подключите нестандартный шрифт к сайту. Затем его просто нужно будет использовать как обычно для любых текстовых элементов сайта. Пример покажу ниже.

Таким образом, все заголовки H1 на вашем сайте будут отображаться шрифтом Archangel. Точно так же вы можете назначить нестандартный шрифт для любого другого элемента вашего сайта с помощью правил CSS.

Вот такой простой способ подключения нестандартных шрифтов на сайт. Я встречал несколько других способов, в том числе и с использованием JavaScript, но ни один другой мне не понравился. А с помощью CSS я быстро и легко смог использовать нестандартный шрифт на сайте WordPress.

Опубликовано: 2 мая 2012
Другие полезные статьи на нашем блоге

  • ⭐ Laravel или WordPress — что выбрать для своего сайта? Привет! Это статья для владельцев сайтов и для тех, кто хочет запустить свой Онлайн-проект или Интернет сервис. Ну, если ты придумал какой-то микро-стартап или нужен сайт для обслуживания твоего бизнеса…
  • ⭐ Сайт на Elementor медленно загружается. Что делать? Привет! Хочу поделиться своим мнением про плагин для WordPress Elementor, и рассказать о том, почему сайты на Elementor получаются «плохими» и «медленными» в большинстве случаев. Парочка важных поправок Во-первых, сам…
  • ⭐ Timeweb — отзыв и подробный обзор Привет! Timeweb — это компания, которая предоставляет услуги хостинга и VPS/VDS сервера в аренду. Этот пост можно воспринимть как отзыв о Timeweb, поскольку описывать я буду свой персонльный опыт работы…
  • ⭐ Docker — лучшие уроки и учебные материалы для изучения Привет! Видимо ты уже задумался над тем, чтобы изучить Docker, который становится неотъемлемой частью современного Web-разработчика и программиста. Возникает вопрос: как найти самые лучшие уроки и учебные материалы для изучения…

Загрузка своего шрифта

Если у вас на компьютере уже установлен специфический шрифт, то в стилях достаточно добавить строку.

Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам . Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman. Весь наш тщательно продуманный шрифтовой дизайн в одночасье рассыплется и пойдёт прахом, поэтому надо поискать наиболее универсальное решение. Первое что сразу же приходит в голову — это организовать загрузку файла шрифта на компьютер пользователя и отображение текста выбранным шрифтом. По сравнению с другими методами вроде отображения текста через рисунок этот способ самый простой и универсальный.

Какие плюсы в итоге даёт нам загрузка файла шрифта с последующим применением через CSS.

  • Текст легко добавлять и править.
  • В браузере можно пользоваться поиском и находить желаемые фразы.
  • В настройках браузера можно уменьшать или увеличивать размер шрифта добиваясь комфортного просмотра.
  • Поисковые системы хорошо индексируют содержимое документа.
  • Текст можно выделить и скопировать в буфер, а также перевести на другой язык.
  • Параметры текста вроде межстрочного расстояния, цвета, размера и тому подобное легко менять с помощью свойств CSS.
  • К тексту опять же через CSS просто добавлять разные эффекты, например тень.

Как видите, преимуществ очень много. Небольшие минусы тоже имеются и для баланса их стоит упомянуть.

  • Не все версии браузеров поддерживают загружаемый шрифт и один для всех формат.
  • Файл, содержащий гарнитуру шрифта, может занимать большой объём, замедляя тем самым загрузку веб-страницы.

В табл. 1 перечислены версии браузеров и форматы шрифтов, которые они поддерживают.

Табл. 1. Поддерживаемые форматы

Формат
TTF 9 12 4 10 3.1 3.5 2.2
EOT 5
WOFF 9 12 5 11.5 5.1 3.6 4.4
SVG 3.2 3

Самые поддерживаемые форматы — TTF и WOFF. За исключением IE до версии 9.0 все браузеры их прекрасно понимают. Так что если у вас шрифт именно в этом формате и вы ориентируетесь на современные браузеры, никаких дополнительных действий делать не придётся. Достаточно в стилях написать следующий код (пример 1).

Пример 1. Подключение TTF

Шрифт @font-face < font-family: Pompadur; /* Гарнитура шрифта */ src: url(/example/font/pompadur.ttf); /* Путь к файлу со шрифтом */ >h1

Современный элемент политического процесса

По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.

Вначале загружаем сам файл шрифта с помощью правила @font-face. Внутри него пишем название гарнитуры шрифта через font-family и путь к файлу через src . Дальше используем шрифт как обычно. Так, если нам требуется задать шрифт заголовка, то для селектора h1 , как показано в примере, задаём свойство font-family с именем загруженного шрифта. Для старых версий IE через запятую перечисляем запасные варианты. В данном случае шрифт заголовка будет «Comic Sans MS», поскольку IE8 и ниже не поддерживает формат TTF.

Результат данного примера показан на рис. 1.

Заголовок с загруженным шрифтом

Рис. 1. Заголовок с загруженным шрифтом

Что делать, если вам позарез нужен свой шрифт в IE8? К счастью, @font-face позволяет подключать одновременно несколько файлов шрифтов разных форматов. Браузеру остаётся только выбрать подходящий. Таким образом, универсальное решение, работающее во всех браузерах, сводится к конвертации имеющегося формата TTF в EOT с последующим подключением обоих файлов.

Для конвертации имеется несколько онлайновых сервисов, позволяющих загрузить TTF-файл и на выходе получить EOT-файл. К сожалению, у большинства этих сервисов одна и та же беда — файл мы получаем, но русский язык в нём не поддерживается. В итоге нужный результат не достигается, конвертация происходит неверно. Среди проверенных сайтов оказался один, показавший текст в IE правильно.

Переходим на этот сайт, загружаем TTF-файл и нажимаем кнопку «Convert TTF to EOT», после чего сохраняем полученный файл в папку со шрифтами. В стилях осталось совершить небольшой трюк и заставить разные браузеры загружать шрифт в нужном формате. Для этого добавляем два параметра src . Первый указывает на файл EOT и предназначен для старых версий IE. Второй параметр src должен содержать два адреса перечисляемых через запятую, один из них указывает на файл TTF. Дело в том, что IE версии 8.0 и младше не понимает запятую в параметре src и, соответственно, будет игнорировать параметр целиком. Вариантов написания может быть несколько, например, повторить url , указать имя шрифта внутри параметра local или вообще написать несуществующий шрифт. Если браузер не сможет загрузить такой шрифт, то он перейдёт ко второму в списке, а он у нас написан правильно. Допустимые способы написания.

src: url(font/pompadur.ttf), url(font/pompadur.ttf);
src: local(pompadur), url(font/pompadur.ttf);
src: local(‘bla bla’), url(font/pompadur.ttf);

Работающий вариант подключения шрифта для всех версий браузеров показан в примере 2.

Пример 2. Подключение EOT

Шрифт @font-face < font-family: Pompadur; /* Гарнитура шрифта */ src: url(/example/font/pompadur.eot); /* Для IE5+ */ src: local(pompadur), url(/example/font/pompadur.ttf); /* Для остальных браузеров */ >h1

Современный элемент политического процесса

По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.

Google Web Fonts

Удобный сервис, берущий на себя рутину по поддержке разных форматов шрифтов и версий браузеров, вы найдёте по адресу www.google.com/webfonts. Хотя в коллекции сравнительно мало разных шрифтов (их несколько десятков), все они подобраны очень качественно и свободны для использования на сайтах.

Перед выбором шрифта переключите значение Script на Cyrillic, тогда вы увидите список шрифтов поддерживающих русский язык (рис. 2).

Выбор шрифтов в Google Web Fonts

Рис. 2. Выбор шрифтов в Google Web Fonts

Понравившийся шрифт предварительно следует добавить в коллекцию, нажав на кнопку «Add to Collection», а затем на кнопку «Use» в правом нижнем углу экрана. На следующей странице (рис. 3) вы можете окончательно выбрать нужные вам шрифты. При этом надо понимать, что гарнитура шрифта может содержать несколько начертаний и каждое из них повышает объём загружаемых файлов.

Загружаемые на страницу шрифты

Рис. 3. Загружаемые на страницу шрифты

Подключить выбранные шрифты можно одним из трёх путей, добавляемый код можно скопировать ниже по странице.

1. Через элемент . Строка будет иметь примерно следующий вид.

2. Через правило @import . Такую строку вставляем в свой CSS-файл в самом верху.

@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. Через JavaScript.

В принципе, все пути равноценны, так что выбирайте по своему предпочтению.

Преимущества применения данного сервиса такие.

  • Шрифты свободны для использования, вам не нужно за них платить.
  • Предлагаемые шрифты «заточены» для просмотра на экране, файлы оптимизированы и занимают сравнительно небольшой объём.
  • Браузер определяется автоматически и под него выдаётся шрифт в нужном формате.

Один из основных плюсов сервиса, что шрифты хранятся в форматах TTF, EOT, WOFF, SVG и загружаются после проверки браузера. Так, формат EOT будет доступен только для старых версий IE.

Использовать Google Web Fonts или нет решать вам. Если не нашли там подходящего шрифта, всегда можно подключить популярный и распространённый TTF. Тем более, что он поддерживается последними версиями всех популярных браузеров.

См. также

  • @font-face
  • font-family
  • font-family в CSS
  • Установка шрифта

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *