CSS Безопасные веб-комбинации шрифтов
Часто используемые сочетания шрифтов
Свойство font-family должно содержать несколько имен шрифтов в качестве "резервной" системы, чтобы обеспечить максимальную совместимость между браузерами/операционными системами. Если обозреватель не поддерживает первый шрифт, он пытается следующий шрифт.
Начните с нужного шрифта и заканчивайте родовым семейством, чтобы позволить обозревателю выбрать аналогичный шрифт в родовом семействе, если другие шрифты недоступны:
Пример
p {
font-family: "Times New Roman", Times, serif;
}
Ниже приведены некоторые часто используемые сочетания шрифтов, упорядоченные по родовому семейству.
Шрифты с засечками
font-family | Пример текста |
---|---|
Georgia, serif | This is a headingThis is a paragraph |
"Palatino Linotype", "Book Antiqua", Palatino, serif | This is a headingThis is a paragraph |
"Times New Roman", Times, serif | This is a headingThis is a paragraph |
Шрифты без засечек
font-family | Пример текста |
---|---|
Arial, Helvetica, sans-serif | This is a headingThis is a paragraph |
"Arial Black", Gadget, sans-serif | This is a headingThis is a paragraph |
"Comic Sans MS", cursive, sans-serif | This is a headingThis is a paragraph |
Impact, Charcoal, sans-serif | This is a headingThis is a paragraph |
"Lucida Sans Unicode", "Lucida Grande", sans-serif | This is a headingThis is a paragraph |
Tahoma, Geneva, sans-serif | This is a headingThis is a paragraph |
"Trebuchet MS", Helvetica, sans-serif | This is a headingThis is a paragraph |
Verdana, Geneva, sans-serif | This is a headingThis is a paragraph |
Monospace Fonts
font-family | Пример текста |
---|---|
"Courier New", Courier, monospace | This is a headingThis is a paragraph |
"Lucida Console", Monaco, monospace | This is a headingThis is a paragraph |
Совет: Кроме того, проверьте все доступные шрифты Google и их использование.