Главная » Языки программирования

Font family html шрифты

Содержание
  1. font — family
  2. Пример
  3. Как понять
  4. Как пишется
  5. Значения
  6. Ещё пример
  7. Подсказки
  8. На практике
  9. Алёна Батицкая советует
  10. font-family
  11. Интерактивный пример
  12. Синтаксис
  13. Значения
  14. Валидные имена семейства шрифтов
  15. Формальный синтаксис
  16. Примеры
  17. Некоторые общие семейства шрифтов
  18. Спецификации
  19. Совместимость с браузерами
  20. Found a content problem with this page?

font — family

С помощью font — family можно задать семейство шрифта, которым будет написан текст. Можно прописать конкретный шрифт, например «Arial». А можно задать желаемый тип шрифта: например, с засечками serif или без засечек sans — serif .

Пример

Скопировать ссылку «Пример» Скопировано

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

 body  font-family: "PT Sans", "Arial", sans-serif;> body  font-family: "PT Sans", "Arial", sans-serif; >

Как понять

Скопировать ссылку «Как понять» Скопировано

«PT Sans», «Arial», «Times New Roman» — это примеры семейств шрифтов. С помощью font — family можно задать любой шрифт для любого текстового элемента на странице.

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Обычно в font — family задают сразу несколько шрифтов, перечисляя их через запятую. На первом месте ставят самый редкий шрифт из тех, что хотят использовать для этого элемента. Затем — похожий, но более распространённый шрифт. В самом конце — желаемый тип шрифта. Браузер проходит по списку слева направо и использует первый найденный на компьютере шрифт.

Значения

Скопировать ссылку «Значения» Скопировано

  • Имя шрифта — шрифт, который будет использоваться на странице. Например, Times или Helvetica.
  • Семейство шрифтов — прописывается последним на случай, если ни одного из шрифтов нет на компьютере пользователя:
    • serif — шрифт с засечками, например, «Times».
    • sans — serif — шрифт без засечек, например, «Arial».
    • monospace — моноширинные шрифты с одинаковой шириной каждого символа. Похожи на текст, набранный на печатной машинке. Например, шрифт «Courier».
    • cursive — курсивный шрифт или italic.
    • fantasy — декоративный шрифт.
    • system — ui — использует стандартный шрифт на устройстве пользователя.

    Ещё пример

    Скопировать ссылку «Ещё пример» Скопировано

    Зададим разные шрифты для заголовков и для основного текста:

     
    Этот заголовок написан шрифтом Roboto без засечек
    А параграф — шрифтом Roboto Slab с засечками.
      
    Для второго заголовка установлено семейство sans-serif
     
    Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками, установленный в системе по умолчанию.
          h1>Этот заголовок написан шрифтом Roboto без засечекh1> p>А параграф — шрифтом Roboto Slab с засечками.p> div class="generic"> h2>Для второго заголовка установлено семейство sans-serifh2> p>Семейство шрифтов этого параграфа указано как serif — это шрифт с засечками, установленный в системе по умолчанию.p> div>          
     h1  font-family: Roboto, Geneva, Arial, Helvetica, sans-serif;> p  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif;> .generic h2  font-family: sans-serif;> .generic p  font-family: serif;> h1  font-family: Roboto, Geneva, Arial, Helvetica, sans-serif; > p  font-family: "Roboto Slab", Georgia, "Times New Roman", Times, serif; > .generic h2  font-family: sans-serif; > .generic p  font-family: serif; >

    Подсказки

    Скопировать ссылку «Подсказки» Скопировано

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

    💡 Не забывай добавлять желаемый тип шрифта ( serif , sans — serif или другой), так как нет гарантий, что нужный вам шрифт найдётся на компьютере пользователя.

    На практике

    Скопировать ссылку «На практике» Скопировано

    Алёна Батицкая советует

    Скопировать ссылку «Алёна Батицкая советует» Скопировано

    🛠 Если в макете используется один из нестандартных шрифтов, то вам потребуется подключить его в свою вёрстку при помощи свойства @font — face .

    🛠 Всегда указывай несколько вариантов шрифтов в следующем порядке:

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

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

    Источник

    font-family

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

    Интерактивный пример

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

    Часто удобно использовать сокращённое свойство font , чтобы задать font-size и другие свойства, которые относятся к шрифту.

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

    Свойство font-family определяет список шрифтов в приоритете от высшего к низшему. Процесс выбора шрифта не останавливается после первого шрифта, найденного в системе пользователя. Скорее, выбор шрифта выполняется по одному символу за раз, поэтому если в доступном шрифте нет глифы для нужного символа, пробуются следующие по списку шрифты. (Однако, это не работает в Internet Explorer 6 и ранее.) Когда шрифт доступен только в некоторых стилях , видах (en-US) или размерах , эти свойства могут так же влиять на выбор шрифта.

    Синтаксис

    /* Имя шрифта и общие семейства шрифтов */ font-family: Gill Sans Extrabold, sans-serif; font-family: "Goudy Bookletter 1911", sans-serif; /* Только общие семейства */ font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-family: system-ui; font-family: emoji; font-family: math; font-family: fangsong; /* Глобальные значения */ font-family: inherit; font-family: initial; font-family: unset;

    Свойство font-family получает список из одного или более семейства шрифтов, разделённые запятыми. Каждое семейство шрифтов определяется как или .

    В приведённом ниже примере перечислены два семейства шрифтов, первое , а второе как :

    font-family: Gill Sans Extrabold, sans-serif;

    Значения

    Имя семейства шрифтов. К примеру, «Times» и «Helvetica» это семейства шрифтов. Названия семейства шрифтов, которые содержат пробелы, должны быть взяты в кавычки.

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

    Глифы имеют завершающие штрихи, расширяющиеся или сужающиеся концы, или имеют фактически зазубренные окончания. Например, «Lucida Bright», «Lucida Fax», Palatino, «Palatino Linotype», Palladio, «URW Palladio», serif.

    Глифы имеют гладкие окончания. Например, «Open Sans», «Fira Sans», «Lucida Sans», «Lucida Sans Unicode», «Trebuchet MS», «Liberation Sans», «Nimbus Sans L», sans-serif.

    Все глифы имеют одинаковую фиксированную ширину. Например, «Fira Mono», «DejaVu Sans Mono», Menlo, Consolas, «Liberation Mono», Monaco, «Lucida Console», monospace.

    Глифы в курсивных шрифтах обычно имеют либо соединительные штрихи, либо другие рукописные характеристики, отличные от наклонных (italic) шрифтов. Глифы частично или полностью связаны, и результат больше напоминает рукописное перо или кисть, чем печатные буквы. Например, «Brush Script MT», «Brush Script Std», «Lucida Calligraphy», «Lucida Handwriting», «Apple Chancery», cursive.

    Фэнтезийные шрифты — это прежде всего декоративные шрифты, которые содержат игривое представление персонажей. Например, Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

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

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

    Шрифты, специально предназначенные для отображения эмодзи.

    Особый стиль китайских иероглифов, который является чем-то средним между стилем с засечками Song и курсивным стилем Кай. Этот стиль часто используется для правительственных документов.

    Валидные имена семейства шрифтов

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

    Например, следующие объявления являются валидными:

    font-family: Gill Sans Extrabold, sans-serif; font-family: "Goudy Bookletter 1911", sans-serif;

    Следующие объявления являются не валидными:

    font-family: Goudy Bookletter 1911, sans-serif; font-family: Red/Black, sans-serif; font-family: "Lucida" Grande, sans-serif; font-family: Ahem!, sans-serif; font-family: test@foo, sans-serif; font-family: #POUND, sans-serif; font-family: Hawaii 5-0, sans-serif;

    Формальный синтаксис

    Примеры

    Некоторые общие семейства шрифтов

    .serif  font-family: Times, Times New Roman, Georgia, serif; > .sansserif  font-family: Verdana, Arial, Helvetica, sans-serif; > .monospace  font-family: Lucida Console, Courier, monospace; > .cursive  font-family: cursive; > .fantasy  font-family: fantasy; > .emoji  font-family: emoji; > .math  font-family: math; > .fangsong  font-family: fangsong; > 
    div class="serif"> This is an example of a serif font. div> div class="sansserif"> This is an example of a sans-serif font. div> div class="monospace"> This is an example of a monospace font. div> div class="cursive"> This is an example of a cursive font. div> div class="fantasy"> This is an example of a fantasy font. div> div class="math"> This is an example of a math font. div> div class="emoji"> This is an example of an emoji font. div> div class="fangsong"> This is an example of a fangsong font. div>

    Спецификации

    Начальное значение зависит от браузера
    Применяется к все элементы. Это также применяется к ::first-letter и ::first-line .
    Наследуется да
    Обработка значения как указано
    Animation type discrete

    Совместимость с браузерами

    BCD tables only load in the browser

    [1] system-ui в данный момент не реализовано, смотри баг 1226042. [2] system-ui реализовано в Safari (wkbug.com/151493), возможно будет выпущено в ближайшем времени. [3] префиксный алиас -apple-system поддерживается в Safari, начиная с OS X 10.11 и iOS 9, а также в Firefox 43 на macOS (баг 1201318).

    Found a content problem with this page?

    This page was last modified on 7 нояб. 2022 г. by MDN contributors.

    Your blueprint for a better internet.

    Источник

    Читайте также:  Javascript string false to boolean
Оцените статью
© 2024 Программирование