В этой статье мы представим распространённые веб-шрифты, включая китайские и английские:

Английский

Без засечек

  • Helvetica:Считается любимым шрифтом дизайнеров, реалистичный стиль, чистые и современные линии, очень востребован. Он считается лучшим веб-шрифтом на Mac, но ужасно отображается в Windows из-за хинтинга.
  • Arial:«Клон» Helvetica, очень похож на Helvetica, с небольшими различиями в деталях, таких как R и G. Если размер шрифта слишком мал и текста слишком много, читать может быть немного утомительно. Нормально отображается как в Windows, так и на Mac.
  • Семейство Lucida:Lucida Grande — стандартный шрифт для интерфейса Mac OS, относится к гуманистическому стилю, немного более живой. На Mac отображается лучше, чем на Windows.
  • Verdana:Шрифт, специально разработанный для отображения на экране, гуманистического стиля, остаётся хорошо читаемым при малых размерах шрифта, но у него сильно недостаёт деталей шрифта; лучше не использовать для заголовков.
  • Tahoma:Также гуманистический стиль, несколько похож на Verdana, но чуть уже и с немного меньшими внутрибуквенными просветами. Когда-то был стандартным шрифтом Windows и устанавливается по умолчанию на Mac начиная с 10.5.
  • Trebuchet MS:Гуманистический шрифт, разработанный для Microsoft. Лично я считаю, что его индивидуальность слишком ярко выражена, и при неудачном использовании он может не подойти.

Serif

  • Georgia:В основном подходящий для экранного основного текста шрифт с засечками — это не что иное, как Georgia. Толстые штрихи, чёткие засечки, более крупный рисунок, чёткое отображение даже при малых размерах, а детали всё ещё приемлемы.
  • Times:Times был создан для газет, его особенность — вмещать больше текста в ограниченном пространстве. Его штрихи слабее, и мелкий основной текст на экране выглядит утомительно. Когда Engadget провёл редизайн и использовал Times для основного текста, это подверглось резкой критике, и затем они переключились на Georgia.

Китайский

  • SimSun (Zhongyi Songti):Самый распространённый шрифт в Windows. Малые кегли используют битмапы, крупные используют TrueType, но крупные выглядят неважно, поэтому лучше не использовать его для заголовков.
  • Microsoft YaHei:Шрифт, впервые представленный после Vista. Хорошо отображается при включённом ClearType, но без ClearType выглядит размытым.
  • STXihei (Huawen Xihei):Китайский шрифт по умолчанию на Mac.
  • Droid Sans и производный от него WenQuanYi Micro Hei:Китайский шрифт в Android, также китайский по умолчанию в большинстве дистрибутивов Linux. Конечно, некоторые используют WenQuanYi Zen Hei, но сейчас это менее распространено.

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

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

Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
abcdefghijklmnopqrstuvwxyz 0123456789
Влияние
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (22px)
abcdefghijklmnopqrstuvwxyz 0123456789
Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
Trebuchet MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
Microsoft YaHei
24px Microsoft YaHei китайский шрифтЖирный китайский шрифт © Yifangtian
ABCDEFGHIJKLMNOPQRSTUVWXYZ (24px)
abcdefghijklmnopqrstuvwxyz 0123456789
20px Microsoft YaHei китайский шрифтЖирный китайский шрифт © Yifangtian
ABCDEFGHIJKLMNOPQRSTUVWXYZ (20px)
abcdefghijklmnopqrstuvwxyz 0123456789
SimSun
26px китайский шрифт SimSunПолужирный китайский шрифт
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
18px китайский шрифт SimSunПолужирный китайский шрифт
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
SimHei* Используйте полужирный шрифт с осторожностью
26px китайский шрифт SimHeiПолужирный китайский шрифт
ABCDEFGHIJKLMNOPQRSTUVWXYZ (26px)
abcdefghijklmnopqrstuvwxyz 0123456789
18px китайский шрифт SimHeiПолужирный китайский шрифт
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789

Английские немоноширинные шрифты

Arial
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Comic Sans MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ 10px
abcdefghijklmnopqrstuvwxyz 0123456789
Georgia
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Tahoma
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789
Time News Roman
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
Trebuchet MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
Verdana
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (11px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (10px)
abcdefghijklmnopqrstuvwxyz 0123456789

Английские моноширинные шрифты

Courier New
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Hei
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Monaco
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
simhei
ABCDEFGHIJKLMNOPQRSTUVWXYZ (18px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (16px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789

Китайские шрифты

SimSun
14px SimSun китайский шрифтЖирный китайский шрифт
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
12px SimSun китайский шрифтЖирный китайский шрифт
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
Microsoft YaHei
14px Microsoft YaHei китайский шрифтЖирный китайский шрифт
ABCDEFGHIJKLMNOPQRSTUVWXYZ (14px)
abcdefghijklmnopqrstuvwxyz 0123456789
12px Microsoft YaHei китайский шрифтЖирный китайский шрифт
ABCDEFGHIJKLMNOPQRSTUVWXYZ (12px)
abcdefghijklmnopqrstuvwxyz 0123456789
MingLiU 11px китайский шрифт
11px чёткий китайский шрифтЖирный китайский шрифт (11px)
PMingLiU 11px китайский шрифт
11px чёткий китайский шрифтЖирный китайский шрифт (11px)
Распространённые примеры использования 11px: Tahoma, Verdana, Arial, PMingLiU, MingLiU
11px чёткий китайский шрифтЖирный китайский шрифт (11px)
MS UI Gothic 10px китайский шрифт
Говорят, что этот шрифт немного лучше отображает традиционный китайский, но всё ещё не очень чётко.(10px)