Список шрифты css: Шрифты в HTML (font, font-family, font-face)

Leave a Comment / Css / By /

Основные шрифты — Как создать сайт

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

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

Шрифты в языке CSS, назначаются элементам с помощью свойства font-family.

Список безопасных шрифтов (21 штука) и их примеры:


font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Обратите внимание, что сначала идёт распространённый шрифт (например Arial), если его на компьютере посетителя нет, то идёт более распространённый и похожий на него (например Helvetica), и в конце если оба эти шрифта отсутствуют, подключается

serif, sans-serif, monospace или cursive (данные способы начертания шрифта есть всегда).

Arial
Имя шрифта: font-family: Arial, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Arial Black
Имя шрифта: font-family: ‘Arial Black’, Gadget, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Bookman Old Style
Имя шрифта: font-family: ‘Bookman Old Style’, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Comic Sans MS
Имя шрифта: font-family: ‘Comic Sans MS’, cursive;
Цифры: 0 1 2 3 4 5 6 7 8 9

Courier
Имя шрифта: font-family: Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Courier New
Имя шрифта: font-family: ‘Courier New’, Courier, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Garamond
Имя шрифта: font-family: Garamond, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Georgia
Имя шрифта: font-family: Georgia, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Impact
Имя шрифта: font-family: Impact, Charcoal, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Lucida Console
Имя шрифта: font-family: ‘Lucida Console’, Monaco, monospace;
Цифры: 0 1 2 3 4 5 6 7 8 9

Lucida Sans Unicode
Имя шрифта: font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

MS Sans Serif
Имя шрифта: font-family: ‘MS Sans Serif’, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

MS Serif
Имя шрифта: font-family: ‘MS Serif’, ‘New York’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Palatino Linotype
Имя шрифта: font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Symbol
Имя шрифта: font-family: Symbol, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Tahoma
Имя шрифта: font-family: Tahoma, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Times New Roman
Имя шрифта: font-family: ‘Times New Roman’, Times, serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Trebuchet MS
Имя шрифта: font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Verdana
Имя шрифта: font-family: Verdana, Geneva, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Webdings
Имя шрифта: font-family: Webdings, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

Wingdings
Имя шрифта: font-family: Wingdings, ‘Zapf Dingbats’, sans-serif;
Цифры: 0 1 2 3 4 5 6 7 8 9

  • Category: Разное

Дата публикации поста: 5 февраля 2016

Дата обновления поста: 24 октября 2014

Бесплатный хостинг от компании Бегет, для начинающих: beget. com/ru/hosting/free

sans, sans serif и т.д.

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

  • Семейства шрифтов
  • Шрифты для Веб
  • Применение списка шрифтов

Базовый список CSS шрифтов делится по 5 типам:

  • sans-serif — это шрифты, которые имеют небольшие засечки на окончаниях линий каждого символа;
  • serif;
  • monospace;
  • cursive;
  • fantasy;

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

Поскольку свойство CSS font family наследуется всеми дочерними элементами HTML, — можно применить шрифт ко всей веб-странице, задав его для элемента <body>.

body{ font-family: sans-serif;}

В этом примере на веб-странице в качестве приоритетного будет использоваться шрифт sans-serif.

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

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

body{ font-family: Arial;}

Для веб-страницы будет использоваться CSS font family Arial, но при условии, что он установлен на компьютере пользователя. Иначе будет использоваться заданный по умолчанию для браузера шрифт типа serif (как правило, это Times).

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

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

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

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

body{ font-family: Arial, Verdana, sans-serif;}

В этом примере мы указываем браузеру искать первое значение CSS font family Arial и использовать его. Если этот шрифт недоступен, программа будет использовать Verdana. И, наконец, если он не доступен, то будет использовать шрифт по умолчанию sans-serif.

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

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

Вадим Дворниковавтор-переводчик статьи «Choosing a font»

шрифтов CSS — TutorialBrain

Шрифты CSS

Существует несколько свойств шрифтов CSS для стилизации шрифтов. The important properties are –

  • font color
  • font size
  • font variant
  • font weight
  • font family
  • font style
  • font spacing

Цвет шрифта

Свойство color устанавливает цвет шрифтов или текста.

Хорошей практикой является определение цвета фона при определении цвета шрифта в соответствии со стандартом W3C.

Синтаксис для установки цвета шрифта текста:
цвет: название цвета ;
Где название цвета может быть таким:

  • Фактическое название цвета, такое как красный, синий, голубой, томатный, морской и т.
    д.
  • Шестнадцатеричный код цвета. Пример — #f1f1f1
  • С точки зрения RGB, что означает красный, зеленый и синий. Пример, RGB(0,0,1)
  • По значению hsl.

Пример цвета шрифта 

 <стиль>
.Цвет шрифта {
  цвет синий;
  цвет фона: оранжевый;
}

.font_color_hex {
  цвет:#f1f1f1;
  цвет фона: красный;
}

Подписаться на @tutorial_brain

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

С помощью свойства CSS « font-size » можно установить размер шрифта.

Рекомендуется задавать цвет фона при определении цвета текста.

Размер шрифта может использовать несколько единиц измерения, таких как px, em, %, маленький, средний, большой, наследуемый, неустановленный, начальный и т. д. По умолчанию размер текста составляет 16 пикселей и 16px=1em.

W3C рекомендует использовать em для размера шрифта, что позволяет пользователям изменять размер текста в соответствии с браузером.

Некоторые веб-разработчики не хотят использовать em, потому что это нужно сначала вычислить.

(1em=16px), поэтому они используют px(пиксели), и хорошей практикой является установка размера текста в пикселях, потому что это дает вам строгий контроль над размером текста.

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

Синтаксис для установки размера шрифта:
размер шрифта : другой -размер- единиц ;

Некоторые примеры размеров шрифта:
font-size:14px;
размер шрифта: 1,2 em;
размер шрифта: 4vw;
размер шрифта:60%;
размер шрифта: маленький;
размер шрифта:меньше;
размер шрифта:x-маленький;
размер шрифта:xx-маленький;

размер шрифта: средний;
размер шрифта:большой;
размер шрифта:больше;
размер шрифта:x-большой;
размер шрифта:xx-большой;
размер шрифта:наследовать;
размер шрифта: не установлен;
размер шрифта: начальный;

Предупреждение/Опасность/Информация/Успех

  • Вы должны использовать свойство Размер шрифта только для настройки размера текста. Вы не должны использовать свойство font-size в абзаце, чтобы он выглядел как заголовок или наоборот.

    • Простой пример размера шрифта 

     <стиль>
#размер шрифта {
  размер шрифта: 24px;
}

    Пример различных размеров шрифта 

     <стиль>
  .px {
размер шрифта: 30 пикселей;
}
  .em {
размер шрифта: 1.2em;
}
  .vw {
размер шрифта: 2.5vw;
}
  .процент {
размер шрифта: 70%;
}
  .маленький {
размер шрифта: маленький;
}
  .меньше {
размер шрифта: меньше;
}
  .x-маленький {
размер шрифта: x-маленький;
}
  .xx-маленький {
размер шрифта: xx-маленький;
}
  .середина {
размер шрифта: средний;
}
  .большой {
размер шрифта: большой;
}
  .больше {
размер шрифта: больше;
}
  .x-большой {
размер шрифта: x-большой;
}
  .xx-большой {
размер шрифта: xx-крупный;
}

    Вариант шрифта

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

    Синтаксис для установки варианта шрифта:
    вариант шрифта : прописные | обычный ;

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

     #font_variant {
  вариант шрифта: капитель;
}

    Подписаться на @tutorial_brain

    Адаптивный размер шрифта

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

    Чтобы создать адаптивный размер шрифта, используйте единицу измерения «VW» для текстов. Это означает ширину окна просмотра.

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

    Этот шрифт очень большой

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

    Примечание/информация:

    Для создания адаптивных текстов и адаптивного веб-дизайна всегда рекомендуется включать свойство мета-имени с помощью тега —

    Например:
    0″>
                                     или

    Пример адаптивного шрифта Размер