Font family css возможные шрифты: Нестандартный шрифт средствами CSS — Xiper

font-stretch — CSS — Дока

1. Кратко
2. Как пишется
3. Подсказки

Кратко

Скопировано

Свойство font-stretch устанавливает узкое, нормальное или широкое начертание шрифта. Как и в случае font-weight, браузер не меняет рисунок шрифта, а выбирает из доступных шрифтов подходящие начертания, если они описаны в @font-face или есть в системном шрифте.

Как пишется

Скопировано

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

Возможные значения:

• normal — нормальная или «текстовая» ширина шрифта (значение по умолчанию).
• semi-condensed, condensed, extra-condensed, ultra-condensed — сжатое начертание разной степени.
• semi-expanded, expanded, extra-expanded, ultra-expanded — расширенное начертание разной степени.
• проценты — точное указание процентов. Отрицательные значения недопустимы. Границы диапазона зависят от того, какие значения поддерживает шрифт.

Пример двух разных шрифтов с значениями, указанными в процентах

Интерактивный пример использования процентов в качестве значения:

Открыть демо в новой вкладке

Сопоставление ключевых слов с числовыми значениями:

• ultra-condensed — 50%;
• extra-condensed — 62.5%;
• condensed — 75%;
• semi-condensed — 87. 5%;
• normal — 100%;
• semi-expanded — 112.5%;
• expanded — 125%;
• extra-expanded — 150%;
• ultra-expanded — 200%.

⚠️

Некоторые шрифты поддерживают не все значения. Так, Roboto Flex поддерживает значения в диапазоне от 25 до 151% и в примере ниже font-stretch будет иметь значение 151%, а не 200%, как ожидалось.

p {  font-family: "Roboto Flex", sans-serif;  font-stretch: ultra-expanded;}
          p {
  font-family: "Roboto Flex", sans-serif;
  font-stretch: ultra-expanded;
}

Посмотреть, какие начертания поддерживает шрифт можно на Google Fonts.

Пример использования ключевых слов в качестве значения:

Открыть демо в новой вкладке

Подсказки

Скопировано

💡 Google API определяет ваш браузер для обеспечения совместимости (не все браузеры поддерживают вариативность шрифтов). Но из-за неточностей, некоторые браузеры, которые её поддерживают (например Opera), все равно получают статические шрифты. Имейте это в виду при работе с Google Fonts.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

font-size-adjust

ctrl + alt + ←

→

font-synthesis

ctrl + alt + →

Почему не отображаются шрифты

TILDA HELP CENTER

Если на сайте часть текста выводится правильным шрифтом, а часть другим, типа Times, вероятнее всего проблема в том, что неправильный шрифт был назначен вручную при редактировании.

Почему так?
Скорее всего вы редактировали текст и указывали шрифт вручную (через верхнюю панель редактирования) для части текста. Например, это был Open Sans.

Затем вы решили в настройках сайта поменять шрифт на PT Sans. В блоках, где шрифт не был указан вручную, все стало отображаться новым шрифтом. Но вы-то при редактировании текста в некоторых блоках указали жестко что этот текст будет Open Sans. А шрифт больше не подгружается, вместо него — шрифт по умолчанию, Times. Поэтому надо сбросить весь «жесткий» стиль текста.

Что делать?
Нужно сделать так: выбрать блок в котором шрифт не отображается, войти в режим редактирования текста, выделить все. Выбрать «Remove Font Family». Или нажать на крайнюю правую кнопку — «очистить все стили». Переопубликовать страницу.

Проблемы и способы решения в зависимости от метода подключения шрифта

Шрифт подключен CSS-файлом

Шрифт подключен с помощью файла CSS (своего или от Google Fonts), но не отображается

Перейти

Шрифт загружен файлами

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

Перейти

Шрифт взят из библиотеки шрифтов

Возможные проблемы со стандартными шрифтами

Перейти

Шрифт подключен с помощью CSS-файла

“

В настройках сайта подключаю свой шрифт. Все сделал по инструкции. Создал свой css-файл. Загрузил его хранилище. Также загрузил сами шрифты. Прописал в настройках сайта нужный шрифт. Публикую страничку — все выводится стандартным шрифтом типа Times.

Почему так?
Вы неверно указали font-family
Откройте свой css-файл и проверьте строчку font-family: название шрифта в этой строчке должно совпадать с тем названием, которое вы указали в настройках сайта. Пример:

Что делать?
В css-файле написать название шрифта точно так же, как в настройках сайта. В нашем примере ‘Conv_GothaProBol’ нужно поменять на ‘Gotham Pro’.

Важно: При подключении шрифта через файл CSS нужно удостовериться, что сервер, с которого подключается шрифт, поддерживает Access-Control-Allow-Origin CORS для раздачи для любого домена. (Access-Control-Allow-Origin: *). Как установить эту настройку на сервере, указано в инструкции для подключения своего файла CSS

Ошибки при загрузке своего шрифта

“

Загрузил свой шрифт, но вместо него отображается стандартный.

У этой ошибки может быть несколько причин. Сначала нужно проверить, прописан ли шрифт в шрифтовой паре. Важно, чтобы при загрузке у шрифта было прописано полное официальное название, и оно совпадает с названием, указанным при загрузке шрифта.

На этапе загрузки нужно прописать название шрифта

Потом на вкладке Your Own Font нужно прописать название в шрифтовой паре. В примере мы добавили шрифт шрифтом и для заголовков, и для текста

Если у вас был шрифт не в формате WOFF, то его нужно конвертировать. Мы рекомендуем использовать сервис WOFFer, так как в некоторых других конвертерах может быть проблема с кириллической версией шрифта.

Проблемы с базовыми шрифтами

“

«Взял стандартный шрифт, экспортировал проект, но шрифт показывается не тот, который я устанавливал».

На Тильде часть шрифтов берется из библиотеки сервиса Rentafont, который предоставляет шрифты по партнерскому соглашению.

На данный момент это шрифты:

• Futura PT
• Opinion Pro
• Circe (и Circe Rounded)
• Iskra
• Orchidea Pro
• Kazimir Text
• Mediator (и Mediator Serif)
• Reforma Grotesk

Чтобы они работали на экспортированном сайте, нужно обязательно прописать домен, на который вы экспортируете в Настройках сайта → Домен. При этом настраивать домен на Тильду на стороне регистратора домена не нужно.

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

Чтобы файл шрифта загрузился, требуется время. Иногда, это происходит мгновенно (если интернет хороший) и вы сразу видите собственный шрифт. Иногда возникает небольшая пауза.

Чтобы страница не тормозила и посетитель не ждал, сначала загружается самое важное — контент, а потом вспомогательные компоненты. Поэтому вы можете видеть системные шрифты до того, как загрузился ваш шрифт.

Вы можете добавить на страницу блок «Эффект загрузки страницы» (Т228, категория «Другое») он замедлит появление контента и текст будет появляться с уже загруженными шрифтами.

WebD2: Применение типографики в CSS

Обзор

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

Результаты учащегося

По завершении этого упражнения:

• вы сможете определить, является ли шрифт с засечками, без засечек или другим семейством шрифтов.
• вы сможете принимать взвешенные решения о том, какие семейства шрифтов использовать на веб-сайте, частично исходя из вероятности того, что эти шрифты будут установлены на компьютерах пользователей.
• вы сможете определить типографику вашего сайта, установив свойства font-family, font-size, font-weight, line-height, text-align и letter-spacing в CSS.

Семейства шрифтов: с засечками, без засечек и другие

В CSS (и в типографике в целом) существует пять основных типов или семейств шрифтов: с засечками, без засечек, курсив, фэнтези и моноширинный.

Шрифты с засечками содержат небольшие линии или штрихи, отходящие от концов символов. Они могут иметь вид маленьких ножек, кепок, решек, флажков или точек. Шрифты с засечками веками использовались в печатных книгах, журналах и газетах.

Шрифты без засечек не имеют засечек («sans» по-французски означает «без»). Эти шрифты просты и понятны.

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

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

Как насчет скорописи, фэнтези и моноширины?

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

Общие типографские свойства в CSS

Типографика в Интернете включает взаимодействие между различными свойствами в CSS. Вот некоторые из наиболее распространенных:

font-family

Это свойство определяет шрифт элемента. Значение font-family представляет собой список предпочтительных шрифтов, разделенных запятой, как в этом примере:

. 
тело {
семейство шрифтов: Verdana, Arial, без засечек;
}
ч2 {
семейство шрифтов: "Times New Roman", Times, serif;
}
 

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

универсальных семейств шрифтов , описанных выше. Опять же, это:

• с засечками
.
• без засечек
• курсив
• фэнтези
• моноширинный

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

Обратите внимание, что в приведенном выше примере «Times New Roman» заключен в кавычки, а другие шрифты — нет. В любое время, когда имя шрифта состоит из более чем одного слова, оно должно быть заключено в кавычки.

размер шрифта

Это свойство определяет размер шрифта. Это может быть выражено в относительных единицах, таких как % или em , или в абсолютных единицах, таких как px (см. предыдущий урок Анатомия стиля, если вам нужно освежить в памяти эти единицы).

Размер шрифта также можно выразить с помощью таких терминов, как «маленький», «средний», «большой», «крупный», «х-крупный» и «хх-крупный».

стиль шрифта

Это свойство определяет стиль шрифта: обычный, курсив или наклонный.

вес шрифта

Это свойство указывает толщину или толщину символов. Он может быть нормальным, светлым, жирным или более жирным. Его также можно выразить в виде числового значения от 100 до 900 (числа должны делиться на 100).

line-height

Это свойство определяет высоту строки текста. Обычно это выражается как % или em и должно быть больше высоты шрифта, иначе строки текста будут сжаты вместе.

Для максимальной удобочитаемости W3C’s Web Content Accessibility Guidelines 2.0 требует, чтобы высота строки блоков текста была не менее 1,5 em или 150%.

text-align

Это свойство указывает, как текст выравнивается по горизонтали. Это может быть слева , справа или по центру . Это также может быть justify , что выравнивает текст как по левой, так и по правой стороне страницы, как в печатном издании. Однако это приводит к неудобным пробелам между словами, и этого следует избегать в Интернете.

letter-spacing

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

text-shadow

Это свойство является новым в CSS3. Следовательно, оно поддерживается не всеми браузерами, но если у вас относительно новый браузер, это свойство может прикреплять тень к тексту. Если все сделано хорошо и используется экономно, это может иметь хороший эффект для контента, такого как заголовки. Дополнительные сведения см. на странице свойства CSS3 Text-shadow на сайте W3Schools. com.

Действия

1. Изучите каждый из следующих веб-сайтов на наличие возможных комбинаций семейств шрифтов:
   • 16 самых популярных шрифтов в веб-дизайне от Вивиан из Inspiration Bit
   • W3C CSS-шрифты страница
   • W3Schools: безопасные сочетания шрифтов CSS для Интернета
2. Выберите два шрифта, которые, по вашему мнению, будут хорошо смотреться в теле вашего веб-сайта-портфолио. Поскольку это повлияет на большую часть текста на вашем веб-сайте, обязательно выберите шрифты, которые, по вашему мнению, будут легко читаться. Кроме того, убедитесь, что два шрифта относятся к одному семейству (например, два без засечек или два шрифта с засечками ). Выбирайте шрифты, похожие друг на друга. Помните, кто ваша аудитория (кто в конечном итоге может прочитать ваше портфолио?) и выбирайте шрифты, которые отражают сообщение и стиль, которые вы хотите донести до этой аудитории. После выбора понравившихся шрифтов выполните поиск выбранных шрифтов в стеке шрифтов CSS.
   CSS Font Stack оценивает процент компьютеров Windows и Mac, на которых установлен каждый шрифт. Убедитесь, что комбинация ваших двух шрифтов подходит как для пользователей Mac, так и для Windows. Например, если один из выбранных вами шрифтов распространен на Mac, но не распространен в Windows, убедитесь, что второй вариант шрифта распространен в Windows.
3. Теперь повторите описанный выше процесс, на этот раз выбрав два шрифта, которые, по вашему мнению, будут хорошо смотреться для заголовков на веб-сайте вашего портфолио.
4. Для третьего шрифта в каждой категории напишите общее название семейства шрифтов: с засечками
   или без засечек .
5. Затем откройте внешнюю таблицу стилей вашего веб-портфолио в текстовом редакторе и ее домашнюю страницу в браузере.
6. Найдите определение стиля для тега body. Посмотрите на свойства, которые в настоящее время используются для определения стиля тела. Добавьте свойство семейства шрифтов или, если оно уже есть, измените его, добавив шрифты, указанные в таблице. Перечислите их по порядку, разделив запятой. Если какое-либо имя шрифта состоит из более чем одного слова, не забудьте заключить его в кавычки. Например, предположим, что вы выбрали Century Gothic в качестве предпочитаемого шрифта, Verdana в качестве безопасного для браузера шрифта и sans-serif в качестве основного семейства шрифтов. Тогда ваше свойство font-family будет выглядеть так:
   семейство шрифтов: «Century Gothic», Verdana, без засечек;

7. Сохраните файл и обновите браузер, чтобы увидеть, как изменение повлияло на вашу домашнюю страницу.
8. Теперь добавьте стиль семейства шрифтов для заголовков h2, h3 и h4. Примечание: Если один и тот же стиль применяется к нескольким элементам, вы можете определить это, используя одно определение стиля, как в следующем примере:

     ч2,ч3,ч4 {
       семейство шрифтов: Rockwell, "Times New Roman", с засечками;
     }
    

9. Сохраните файл и обновите страницу в браузере, чтобы увидеть, как это изменение повлияло на заголовки вашего веб-сайта.
10. Теперь поэкспериментируйте с другими свойствами, перечисленными вверху этой страницы. Применяйте их по одному к различным элементам и смотрите, как они влияют на страницу. Попробуйте использовать эти стили, чтобы улучшить читабельность вашего сайта. Попробуйте стилизовать свой сайт, используя типографику и цвет, чтобы он эффективно использовал контраст, размер, иерархию и пространство. Сохраните стили, которые работают, и удалите те, которые не работают.

Раздаточные материалы/онлайн-документы

• 16 самых популярных шрифтов в веб-дизайне от Вивиан из Inspiration Bit
• W3C CSS-шрифты страница
• W3Schools: безопасные сочетания шрифтов CSS для Интернета
• Стек шрифтов CSS

Все готово?

Покажите инструктору свои результаты перед тем, как перейти к следующему модулю.

Свойство CSS Font-Family

Введение

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

См. пример ниже,

  тело {
    семейство шрифтов: Verdana;
}
  

В приведенном выше примере показано, что основной текст изменится на Verdana, поскольку свойству font-family присвоено значение Verdana.

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

См. пример ниже,

  р {
   семейство шрифтов: «Требюше MS»
}
  

Кроме того, CSS-свойство font-family позволяет указать список имен семейств шрифтов и общих имен для выбранного элемента.

Запятая разделяет значения шрифта, чтобы предположить, что они являются альтернативными.

  р {
  семейство шрифтов: Arial, Helvetica, без засечек;
}
  

Типы универсальных семейств шрифтов

В пространстве CSS есть пять универсальных семейств шрифтов, с которыми нам необходимо ознакомиться:

Serif

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

Без засечек

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

Monospace

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

Cursive

Эти шрифты имитируют человеческий почерк.

Fantasy

Эти шрифты являются декоративными/игривыми.

Разница между шрифтами с засечками и шрифтами без засечек

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

Что нужно помнить

Шрифты по умолчанию

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

Как этого избежать? Вы можете указать общие имена шрифтов и позволить системе пользователя решать, какой шрифт применять.

Например, если вы хотите, чтобы ваш абзац отображался шрифтом без засечек, вы можете использовать правило стиля ниже,

  р {
   семейство шрифтов: без засечек;
}
  

Резервные шрифты

Если вы ищете резервный шрифт, вы увидите что-то вроде этого:

  р {
  семейство шрифтов: «Segoe UI», Tahoma, Geneva, Verdana, без засечек;
}
  

Здесь мы установили, что если в системе доступен пользовательский интерфейс Segeo, мы будем использовать этот шрифт; в противном случае браузер пытается проверить, доступна ли Tahoma; в противном случае компьютер будет искать Женеву, а затем Вердану.

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

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

Веб-безопасные шрифты

Только несколько шрифтов считаются безопасными, также известные как «веб-безопасные» шрифты.

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

Вот несколько шрифтов, с которыми вы можете чувствовать себя достаточно уверенно.

Windows —  Arial, Lucida, Impact, Times New Roman, Courier New, Tahoma, Comic Sans, Verdana, Georgia, Garamond.

Mac —  Helvetica, Futura, Bodoni, Times, Palatino, Courier, Gill Sans, Geneva, Baskerville, Andale Mono.

Резюме

Надеюсь, вам понравился этот небольшой пост в блоге, в котором обсуждается свойство font-family в CSS.

Мы показали вам, как установить свойство font-family, и даже обсудили общие типы шрифтов и следующее: шрифты по умолчанию, резервные шрифты и веб-безопасные шрифты.