Font family css что это
Перейти к содержимому

Font family css что это

  • автор:

font-family

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

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif , sans-serif , cursive , fantasy или monospace . Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

Синтаксис

font-family: имя шрифта [, имя шрифта[, . ]] | inherit

Значения

Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

  • serif — шрифты с засечками (антиквенные), типа Times;
  • sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  • cursive — курсивные шрифты;
  • fantasy — декоративные шрифты;
  • monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).

HTML5 CSS2.1 IE Cr Op Sa Fx

    font-family h1 < font-family: Geneva, Arial, Helvetica, sans-serif; >p 

Duis te feugifacilisi

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

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

Применение свойства font-family

Рис. 1. Применение свойства font-family

Объектная модель

[window.]document.getElementById(» elementID «).style.fontFamily

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

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¶

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

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

    Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берётся следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif , sans-serif , cursive , fantasy или monospace . Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщённым именем, которое задаёт вид начертания.

    Демо¶

    Шрифт и Цвет

    • font
    • font-family
    • font-feature-settings
    • font-kerning
    • font-language-override
    • font-optical-sizing
    • font-size
    • font-size-adjust
    • font-stretch
    • font-style
    • font-synthesis
    • font-variant
    • font-variant-alternates
    • font-variant-caps
    • font-variant-east-asian
    • font-variant-ligatures
    • font-variant-numeric
    • font-variant-position
    • font-variation-settings
    • font-weight
    • line-height

    Синтаксис¶

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
    /* A font family name and a generic family name */ font-family: Gill Sans Extrabold, sans-serif; font-family: 'Goudy Bookletter 1911', sans-serif; /* A generic family name only */ font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-family: system-ui; /* Global values */ font-family: inherit; font-family: initial; font-family: unset; 

    Значения¶

    Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:

    шрифты с засечками (антиквенные), типа Times ;

    рубленные шрифты (шрифты без засечек или гротески), типичный представитель Arial ;

    моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier ).

    Значение по-умолчанию: Шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman .

    Применяется ко всем элементам

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

    • CSS Fonts Module Level 3
    • CSS Level 2 (Revision 1)
    • CSS Level 1

    Описание и примеры¶

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
     html> head> meta charset="utf-8" /> title>font-familytitle> style> h1  font-family: Geneva, Arial, Helvetica, sans-serif; > p  font-family: Georgia, 'Times New Roman', Times, serif; > style> head> body> h1>Танцыh1> p> Венгры страстно любят танцевать, особенно ценятся национальные танцы p> body> html> 

    font-family в CSS

    CSS предлагает несколько свойств шрифтов, непосредственно влияющих на визуализацию текста. Свойство font-family определяет, какой шрифт использовать.

    Общие семейства шрифтов

    Шрифты группируются по пяти общим семействам:

    • serif — на конце каждого символа прикреплены небольшие линии;
    • sans-serif;
    • monospace;
    • cursive;
    • fantasy.

    cursive и fantasy никогда не используются.

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

    body

    С этим правилом CSS веб-страница будет использовать шрифт sans-serif , определённый пользователем в его настройках.

    Надёжные веб-шрифты

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

    body

    Ваша веб-страница будет использовать Arial при условии, что он установлен на компьютере пользователя. Если шрифт Arial недоступен, то браузер будет применять шрифт с засечками по умолчанию (обычно используется Times New Roman).

    Arial является безопасным выбором, хотя бы потому, что он установлен на всех компьютерах Windows и Mac, а также на большинстве систем Linux. Именно поэтому Arial считается надёжным веб-шрифтом: вы можете безопасно использовать его в CSS и быть почти уверены, что шрифт на компьютере пользователя будет установлен.

    Есть девять надёжных веб-шрифтов:

    • Arial
    • Arial Black
    • Comic Sans MS
    • Courier New
    • Georgia
    • Impact
    • Times New Roman
    • Trebuchet MS
    • Verdana

    Применение списка шрифтов

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

    body

    При определении нескольких значений для font-family , браузер будет искать первое значение Arial и использовать его. Если Arial не доступен, то будет использоваться следующий шрифт Verdana. И, наконец, если и он не доступен, то будет использоваться шрифт браузера без засечек по умолчанию.

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

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

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

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