Fonts html: Шрифты в HTML (font, font-family, font-face)

Leave a Comment / Html / By /

Содержание

HTML и CSS с примерами кода

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

Шрифт и Цвет
  • @font-face
  • 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
  • color
  • color-adjust
  • opacity

Синтаксис

/* size | family */
font: 2em 'Open Sans', sans-serif;
/* style | size | family */
font: italic 2em 'Open Sans', sans-serif;
/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;
/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;
/* The font used in system dialogs */
font: message-box;
font: icon;
/* Global values */
font: inherit;
font: initial;
font: unset;

Значения

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

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

caption
Шрифт для текста элементов форм вроде кнопок.
icon
Шрифт для текста под иконками.
menu
Шрифт применяемый в меню.
message-box
Шрифт для диалоговых окон.
small-caption
Шрифт для подписей к небольшим элементам управления.
status-bar
Шрифт для строки состояния окон.

Значение по-умолчанию: зависит от использования

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

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

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

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

p {
  font: 12pt/10pt sans-serif;
}

Из типографики пошла запись указывать через слэш размер шрифта и высоту строки. Поэтому 12pt в данном случае означает размер основного текста в пунктах, а 10pt — высоту строки. В качестве семейства указывается рубленый шрифт (sans-serif).

p {
  font: bold italic 110% serif;
}

Значение bold устанавливает жирное начертание текста, а

italic — курсивное. В данном случае их порядок не важен, поэтому bold и italic можно поменять местами. Размер текста задаётся в процентах, а в качестве гарнитуры используется шрифт с засечками (serif).

p {
  font: normal small-caps 12px/14px fantasy;
}

Значение small-caps принадлежит свойству font-variant и устанавливает текст в виде капители (заглавные буквы уменьшенного размера). Значение normal применяется сразу к двум свойствам: font-style и font-weight.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>font</title>
    <style>
      . layer1 {
        font: 12pt sans-serif;
      }
      h2 {
        font: 2em serif;
      }
    </style>
  </head>
  <body>
    <div>
      <h2>Экзистенциальный либерализм</h2>
      <p>
        Карл Маркс исходил из того, что типология средств
        массовой коммуникации неизбежна.
      </p>
    </div>
  </body>
</html>

font — Справочник CSS

#10094; Назад CSS Справочник Далее #10095;


Пример

Установить некоторые свойства шрифта с помощью стенографического объявления:

p.a {
  font: 15px arial, sans-serif;
}

p.b {
  font: italic bold 12px/30px Georgia, serif;
}

Попробуйте сами »

Определение и использование

Свойство font — это сокращенное свойство для:

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

Требуются значения размера шрифта и семейства шрифтов.

Если одно из других значений отсутствует, используются их значения по умолчанию.

Пимечание: Свойство line-height задает расстояние между линиями.

Значение по умолчанию:Значение по умолчанию для свойств шрифта
Унаследованный:да
Анимируемый:да, см. раздел отдельные свойства. Прочитать о animatable Попробовать
Версия:CSS1
JavaScript синтаксис:object.style.font=»italic small-caps bold 12px arial,sans-serif» Попробовать

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
font1.04.01.01.0 3. 5

Пимечание: См. раздел индивидуальная поддержка браузера для каждого значения ниже.

CSS Синтаксис

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

Значения свойств

Свойство/ЗначениеОписание
font-styleЗадает стиль шрифта. Значение по умолчанию — «normal»
font-variantЗадает вариант шрифта. Значение по умолчанию «normal»
font-weightЗадает вес шрифта. Значение по умолчанию «normal»
font-size/line-heightЗадает размер шрифта и высоту строки. Значение по умолчанию «normal»
font-familyЗадает семейство шрифтов. Значение по умолчанию зависит от браузера
captionИспользует шрифт, используемый заголовками элементов управления (например, кнопки, раскрывающиеся списки и т.
д.)
iconИспользует шрифт, используемый метками значков
menuИспользует шрифты, используемые раскрывающимися меню
message-boxИспользует шрифты, используемые диалоговыми окнами
small-captionУменьшенная версия шрифта заголовка
status-barИспользует шрифты, используемые в строке состояния
initialУстанавливает для этого свойства значение по умолчанию. Прочитать о initial
inheritНаследует это свойство от родительского элемента. Прочитать о inherit

Примеры

Пример

Демонстрация некоторых других значений свойств шрифта

<p>Шрифт браузера, используемый в заголовках элементов управления.</p>

<p>Шрифт браузера, используемый в метках значков.</p>
<p>Шрифт браузера, используемый в выпадающих меню.</p>
<p>Шрифт браузера, используемый в диалоговых окнах. </p>
<p>Уменьшенная версия шрифта подписи.</p>
<p>Шрифт браузера, используемый в строке состояния.</p>

Попробуйте сами »

Связанные страницы

CSS Учебник: CSS Шрифт

HTML DOM Справочник: Свойство font

#10094; Назад CSS Справочник Далее #10095;

Лигатуры в программировании шрифтов | Практическая типография Баттерика

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

Лигатуры в программировании шрифтов — ужасная идея.

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

Во-первых, что такое лигатуры? Лигатуры — это специальные символы в шрифте, которые объединяют два (или более) неприятных символа в один. Например, в шрифтах с засечками строчные буквы f часто сталкиваются со строчными буквами i и l . Чтобы исправить это, fi и fl часто объединяют в одну форму (то, что профессионалы назвали бы глифом ).

fi fj fl ffi gg gy ok
fi fj fl  ffi gg gy wrong
fi fj fl  ffi gg gy right

In this type designer’s opinion, a good ligature doesn’ не привлекать к себе внимание: он просто разрешает любое столкновение, которое могло бы произойти. В идеале, вы даже не заметите, что он есть. И наоборот, именно поэтому я ненавижу лигатуру Th , которая используется по умолчанию во многих шрифтах Adobe: она ничего не разрешает и всегда привлекает к себе внимание.

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

Так в чем проблема с программированием лигатур?

  1. Они противоречат Unicode. Unicode — это стандартизированная система, используемая всеми современными шрифтами, которая однозначно идентифицирует каждый символ. Таким образом, программам не нужно беспокоиться о том, что такие вещи, как греческая буква 9,0065 Δ (= Дельта в верхнем регистре) может быть спрятан в каком-то особом месте шрифта. Вместо этого Unicode назначает уникальное имя и номер для каждого символа, называемого кодовой точкой . Если в вашем шрифте есть Δ , вы связываете его с назначенной ему кодовой точкой Unicode, то есть 0x0394 . В дополнение к буквенным символам Unicode присваивает кодовые точки тысячам символов (включая эмодзи).

    Проблема? Многие из показанных выше программных лигатур легко спутать с существующими символами Unicode. Предположим, вы смотрите на фрагмент кода, в котором используются символы Unicode, и видите символ 9.0065 ≠ . Вы смотрите на лигатуру != , имеющую форму ≠ ? Или фактический символ Юникода 0x2260 , который также выглядит как ≠ ? Лигатура вносит двусмысленность, которой раньше не было.

  2. Даже создатель лигатур Fira Code соглашается с этим моментом: он говорит, что лигатуры «почти никогда» не ошибаются, то есть наполовину полный стакан означает, что иногда они определенно случаются.

    Иногда они гарантированно ошибаются. Существует множество способов для заданной последовательности символов, например != , оказаться в исходном файле. В зависимости от контекста это не всегда означает одно и то же.

    Проблема в том, что замена лигатуры «немая» в том смысле, что она учитывает только то, появляются ли определенные символы в определенном порядке. Он не осознает семантического контекста. Таким образом, любая замена глобальной лигатуры гарантированно будет семантически неправильной частью времени.

Когда мы используем текстовый шрифт с засечками в обычном основном тексте, у нас другие соображения. Лигатура fi всегда означает f , за которой следует i . В этом случае замена лигатуры без учета контекста не меняет смысла.

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

Значит ли это, что у программистов никогда не будет хороших вещей? Совершенно нормально переделывать отдельные персонажи, чтобы отличать их от других. Например, в Triplicate я включил специальный вариант «Код», который включает переработанные версии определенных символов, которые легко спутать.

`$te_fl{1234*567~890} Обычный
`$te_fl{1234*567~890} Код

Но в данном случае суть в устранении неоднозначности: нам не нужны строчные буквы l выглядеть как цифра 1 , а ноль не выглядеть как заглавная буква O . В то время как лигатуры идут в противоположном направлении: отдельные персонажи кажутся другими.

Вывод: это не дело вкуса. В программном коде каждый символ в файле играет особую семантическую роль. Поэтому любое «приукрашивание», делающее одного персонажа похожим на другого, в том числе и лигатуры, приводит в болото отчаяния. Если не верите мне, попробуйте на 10 или 15 лет.

— Мэтью Баттерик
29 марта 2019

кстати

  • Да, я много программирую.

  • «Что значит, дело не во вкусе? Мне нравится использовать лигатуры, когда я кодирую». Большой! Во многих отношениях мне все равно, что вы делаете наедине. Хотя я предсказываю, что вы в конце концов обожжетесь на этом горячем месиве, меня больше всего беспокоит типографика, с которой сталкиваются другие люди. Поэтому, если вы готовите свой код для прочтения другими — будь то на экране или на бумаге — пропустите лигатуры. Не в последнюю очередь потому, что вы даже не будете знать, когда они пойдут не так. Связанные с этим предостережения см. в разделе символы товарных знаков и авторских прав.

  • Одним из источников вдохновения для этой статьи послужила публика LaTeX, которая регулярно писала мне, настаивая на безошибочной типографике. И все еще. Я продолжал видеть книги, подготовленные с помощью LaTeX, в которых обратные кавычки неправильно заменялись фигурными кавычками. Например, приведенный ниже пример взят из Kent Dybvig, The Scheme Programming Language , 4th ed. В этом фрагменте кода Scheme предполагается, что открывающие кавычки являются обратными кавычками; закрывающая кавычка должна быть одинарной прямой кавычкой:

    «Но примеры кода, подобные этим, на самом деле не являются двусмысленными, потому что все знают, что вы не вводите фигурные кавычки». Небрежный аргумент, хотя он может быть верным для языков, которые принимают только ввод ASCII. Но многие современные языки программирования (например, Racket) принимают ввод UTF-8. В этом случае фигурные кавычки могут быть законно частью входного потока. Так что двусмысленность вполне возможна. Та же проблема с лигатурами.

  • Другим источником вдохновения для этой статьи были люди, которые неоднократно спрашивали меня, когда Triplicate получит лигатуры, символы Powerline и так далее. Ответьте как можно вежливее: никогда.

Лучшие HTML и CSS безопасные веб-шрифты для использования в 2022 году

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

Веб-безопасные шрифты — это новый стандарт в веб-дизайне. Эти шрифты работают во всех браузерах и устройствах. Раньше, если на компьютере пользователя не сохранялся шрифт, он мог видеть совершенно другой шрифт, например Times New Roman или Verdana. Чтобы избежать этого, веб-разработчики придумали способ отображать нужный шрифт вне зависимости от того, какой шрифт установлен на компьютере пользователя.

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

 

Эти веб-безопасные шрифты css включают:

Arial
Courier New
Georgia
Times New Roman
Verdana

 

.

Некоторые из новых шрифтов css, которые считаются популярными, включают:

Open Sans
Roboto
Lato
Helvetica
Montserrat

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

Большая часть веб-дизайна сегодня сводится к активам веб-дизайна и, что наиболее важно, к шрифтам, которые вы выбираете. Хотя вы можете использовать Google Web Fonts и Typekit для создания веб-страниц с веб-шрифтами, вам все равно придется проектировать с учетом веб-безопасных шрифтов. Это связано с тем, что не каждый пользователь будет иметь доступ к этим шрифтам, даже если они хранятся в Google. Это означает, что если вы хотите отобразить текст для пользователя в старом браузере, вам все равно нужно выбрать шрифт по умолчанию или веб-безопасный шрифт.

 

 

Стоит ли использовать веб-безопасные шрифты?

Короче говоря, каждый веб-сайт, который вы сегодня видите в Интернете, вероятно, уже использует безопасный для Интернета шрифт css. Это делается для того, чтобы Times New Roman не отображался в чьем-либо браузере Internet Explorer, если у него старый компьютер или у него плохое соединение и он не может загрузить веб-шрифты из Typekit. Также есть проблемы из-за разных операционных систем. Посетителям не обязательно знать, какой шрифт вы выбрали, потому что большинство людей не смотрят исходный код, чтобы понять, почему все внезапно стало шрифтом Times New Roman.

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

 

 

Электронные и веб-шрифты

 

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

Apple Mail
Почта iOS
Почта Android
Outlook 2000
Приложение Outlook. com

Вы можете использовать различные методы оформления электронных писем с помощью веб-шрифтов. Например, метод @Import позволяет импортировать шрифты Google и Typekit в сообщение электронной почты с помощью фрагмента кода.

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

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

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

 

 

Как использовать веб-шрифты

 

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

 

Вот несколько различных наборов шрифтов, которые можно выбрать в Интернете:

Google Fonts
Сегодня это один из самых популярных вариантов. Вы можете загрузить сотни различных шрифтов через Google. Это совершенно бесплатно, и вы можете загружать веб-шрифты прямо на свой компьютер, чтобы создавать макеты дизайнов в своей любимой дизайнерской программе. Они работают с Adobe и Sketch.

 

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

 

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

MyFonts
Font Spring
Font Shop
Process Type Foundry
Commercial Type

Вы можете приобрести шрифты и лицензии непосредственно у авторов, выбрав указанные выше варианты.

 

Не забудьте протестировать свои шрифты

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

 

Правильное использование веб-шрифтов

Хотя вы можете установить шрифт Google довольно быстро, вы можете не знать, когда использовать веб-шрифты. Важно, чтобы везде, где у вас есть семейство шрифтов, использующее веб-шрифт, вы также указывали шрифт по умолчанию или веб-безопасный шрифт. Это может просто означать, что вы указали «семейство шрифтов: Montserrat, Arial, Sans Serif»; в коде. Хотя компьютер сначала попытается загрузить веб-шрифт Montserrat, по умолчанию он будет использовать Arial в качестве веб-безопасного шрифта.

Длинный список лучших безопасных веб-шрифтов

‘Sans-Serif’: Нормальные шрифты

без Serifs

(Sans-serif)

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

 

Arial Black (sans-serif)

Это более жирная версия основного шрифта Arial, крупная и жирная, если не сказать больше. Идеально подходит для заголовков, а не основного текста.

 

Helvetica ( без засечек )

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

 

Verdana (без засечек)

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

 

Trebuchet MS (sans-serif)

Этот шрифт без засечек был разработан Винсентом Коннаре для корпорации Microsoft в 1996 году. цель.

 

Gill Sans ( без засечек )

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

 

Noto Sans (без засечек)

Noto Sans является частью семейства шрифтов Noto. Семейство Noto было создано для создания визуальной преемственности между различными языками и символами в Интернете. Это делает Noto Sans отличным выбором для многоязычных переходов и безопасным выбором для любого веб-сайта.

 

Optima (без засечек)

Как и Gill Sans, Optima — это гуманистический шрифт с органичными рукописными качествами. Шрифт напоминает древнеримский текст и придает царственный вид любой веб-странице. Это один из самых популярных шрифтов в своем роде, который широко используется для логотипов и названий.

 

Arial Narrow (без засечек)

Arial Narrow – один из самых популярных шрифтов благодаря своей универсальности. Его преднамеренно общий дизайн делает этот шрифт хорошим выбором для больших объемов текста. Поскольку семейство шрифтов Arial доступно на Mac и Windows, вам не придется беспокоиться о визуальных несоответствиях в разных операционных системах.

 

 

 

‘serif’: обычные шрифты

с  serifs

 

9Шрифт 0200 Times ( serif )

Times — это традиционный газетный шрифт. Один из самых узнаваемых шрифтов в мире.

 

Times New Roman (с засечками)

Time New Roman — самый популярный шрифт с засечками, который представляет собой то же самое, что Arial в семействе шрифтов без засечек. Times New Roman, используемый в основном на устройствах и в приложениях Windows, представляет собой обновленную и более новую версию шрифта Times.

 

Didot (с засечками)

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

 

Georgia (с засечками)

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

 

Palatino (с засечками)

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

 

Bookman (с засечками)

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

 

New Century Schoolbook (с засечками)

Как следует из названия, New Century Schoolbook — это шрифт с засечками, созданный специально для основного текста. Шрифт вызывает ностальгию, так как он встречается во многих учебниках для начинающих. Как и Bookman, New Century Schoolbook — хороший выбор шрифта для больших текстов.

 

American Typewriter (serif)

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

 

 

«моноширинный»: шрифты фиксированной ширины

 

Andale Mono (моноширинный)

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

 

Courier New (моноширинный)

Вы, вероятно, видели несколько веб-сайтов с этим старым газетным шрифтом. Хотя он похож на Times New Roman, он устарел. Однако, если вы ищете простой моноширинный шрифт, это будет правильным выбором.

 

Courier (моноширинный)

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

 

FreeMono ( моноширинный )

FreeMono — менее известный моноширинный шрифт, являющийся частью проекта GNU FreeFont. Как и моноширинные шрифты, описанные выше, этот шрифт напоминает текст пишущей машинки и имеет механические свойства. Как следует из названия, это совершенно бесплатно.

 

 

«cursive»: шрифты, имитирующие рукописный ввод

 

Comic Sans MS (cursive)

Comic Sans — это шрифт, который люди любят ненавидеть. Это тип шрифта «не относитесь к себе слишком серьезно». Немного веселья. Но если вы серьезно относитесь к дизайну, не используйте его, ха-ха!

 

Apple Chancery (cursive)

Apple Chancery — курсивный шрифт, созданный Apple Inc. Это элегантный шрифт, создающий формальное впечатление. Это делает его прекрасным выбором для сложного веб-сайта.

 

Bradley Hand (курсив)

Bradley Hand — каллиграфический шрифт, основанный на почерке Ричарда Брэдли. Шрифт имеет случайное и личное качество, которое отличается от большинства курсивных шрифтов. Это хороший выбор для коротких текстов и заголовков.

 

Brush Script MT (cursive)

Brush Script MT — еще один каллиграфический шрифт, основанный на обычном почерке. Шрифт немного более формальный, чем у Bradley Hand, но все же сохраняет индивидуальность. Его смелый и уникальный стиль делает его распространенным шрифтом логотипа.

 

 

‘fantasy’: декоративные шрифты, для заголовков и т. д.

 

Impact (фантазия)

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

 

Luminari (фантазия)

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

 

Chalkduster (фантазия)

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

 

Jazz LET (фэнтези)

Jazz LET — это шрифт, который вызывает в воображении видения Великого Гэтсби. Этот шрифт — отличный способ вызвать на веб-странице бурные 20-е годы. Как и Chalkduster, это жирный и подробный шрифт, который лучше всего подходит для короткого текста и заголовков.

 

Blippo (фантазия)

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

 

Stencil Std (фантазия)

Как следует из названия, Stencil Std – это шрифт, основанный на трафаретных буквах. Эффект — громкий шрифт с отношением. Этот шрифт лучше всего использовать в жирных названиях и заголовках.

 

Marker Felt ( фэнтези )

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

 

Trattatello (фантазия)

Trattatello, последний шрифт в этом списке, представляет собой стиль шрифта, основанный на китайской каллиграфии. Он привносит элегантность и таинственность в любой отрывок.

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

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