Кстати о пользовательских шрифтахfont-face, Честно говоря, я с ним не знаком. Чаще всего используется время, чтобы определить iconfont, и синтаксис в принципе не нужно писать самому. Либо используйте плагин postcss, либо автоматически генерируйте соответствующее определение шрифта при генерации шрифт. Кроме iconfont, я мало что знаю о шрифтах, в конце концов, в многочисленных проектах компании, с которыми мне приходилось сталкиваться, большинство проектов ориентированы на мобильный терминал, Hybrid. Пока однажды коллега не прислал мне скриншот и не спросил о сжатии шрифта, я был ошеломлен, когда посмотрел на шрифт PingFang (10MB) на скриншоте, и не мог отделаться от ощущения: времена идут, и вот ПК-версия — это все Имея возможность так играть, нам было жаль пользователей всего сайта размером 800 КБ.
.
Так можно ли использовать пользовательские шрифты в производственных проектах? Могут ли наши пользователи принять такое потребление трафика?
Но что касается приложений для ПК, для загрузки китайского шрифта размером 5 МБ требуется всего несколько сотен миллисекунд (хром: 600 мс+, напрямую подключенный к сетевому кабелю; Xiaomi Wi-Fi Chrome: 5 с+), и пользователи явно чувствуют, что веб-страница замедляется. не работает из-за загрузки шрифта. С мобильной стороны, поскольку трафик становится все дешевле и дешевле, этот трафик кажется приемлемым для более оптимизированного опыта. (В конце концов, полная загрузка требуется только для первой загрузки, в других случаях это обычно 304)
Кроме того, разница между китайскими и английскими размерами шрифта совершенно очевидна: китайские символы (6w+) намного больше, чем наборы английских символов.google-fontРазмер большинства перечисленных выше английских шрифтов составляет от 1 М до 2 М (woff2), а размер китайских шрифтов, таких как PingFang, достигает 5,3 М (woff2).Я пытался найти в Интернете бесплатные китайские шрифты.
Теперь, когда в будущих производственных проектах можно ожидать пользовательских шрифтов, необходимо понимание.
Классификация шрифтов
Существует довольно много типов шрифтов, таких как OpenType, TrueType, Type_1 и так далее. Как правило, в Интернете используются форматы otf, ttf, eot, woff(2) и svg.
TrueType (.ttf) и OpenType (.otf)
Шрифт TrueType является конкурирующим продуктом Type 1 (разработанный Adobe), разработанным Apple и Microsoft.Это наиболее широко используемый шрифт для систем Mac и Windows.Как правило, файлы шрифтов, загружаемые из Интернета, имеют формат ttf. в системе.
TrueType - это предпроизводитель, 90-е годы Microsoft Works GX Teposgographic Technology, и она вынуждена создать имя боевых искусств TrueType Open. Позже, с разработкой компьютера, типографская технология требует более выразительных шрифтов, Adobe и Microsoft сотрудничества Разработан новый шрифт, который сочетает в себе базовую технологию Type 1 и TrueType Open, названный OPEntype. Позже OPEntype был принят Организацией ISO, под названием «Открытый формат шрифта» (ВЫКЛ).
ttf和otf字体在web端来说兼容相对较好，除开IE（很神奇不）和早期的ios safari和Android不怎么支持外，其他浏览器都兼容都不错。然而虽然它们俩在桌面端混的很好，到了移动端却不怎么吃香，因为他们的字体文件实在是太大了。 . PingFang-SC-Regular字体ttf格式11.3MB而otf要到21.4MB
Embedded OpenType(.eot)
Я только что упомянул, что хотя шрифт otf популярен на рабочем столе, он не очень популярен в Интернете из-за своего большого размера, поэтому Microsoft сжала его в соответствии с OpenType и переименовала в Embedded OpenType. Как следует из названия, этот шрифт Это для вложения в веб-страницы. Позже Microsoft много раз обращалась к W3C и хотела использовать EOT в качестве официально рекомендованного шрифта, но в итоге это не удалось, вместо этого WOFF появился позже и стал стандартным шрифтом.
EOT является сыном Microsoft, и все старые браузеры IE поддерживают этот формат, но другие популярные браузеры не поддерживают EOT. Кроме того, шрифт eot также больше, чем файл ttf, поэтому, если он не предназначен для совместимости с браузером IE8, нет необходимости использовать эту штуку.
Формат открытого веб-шрифта (.woff)
Woff начал разработку в 2009 году и стал рекомендованным стандартом для w3c в 2012 году под руководством Mozilla Foundation, Opera Software и Microsoft.
На основе woff, woff2 оптимизирует алгоритм сжатия, вуровень байт-кодаСжатый. woff2 стал рекомендуемым форматом для w3c в марте 2018 года.
Самым большим преимуществом шрифта woff является его небольшой размер, тот же шрифт на 20-40% меньше, чем EOT, а woff2 на 50% меньше, чем eot и ttf. Поскольку он стал рекомендуемым стандартом W3C с 2012 года, можно сказать, что поддержка woff в основных браузерах очень хорошая! Поскольку woff2 только что стал стандартом, совместимость немного меньше, но основные браузеры планируют его поддерживать.
синтаксис шрифта
После стольких гудков я наконец получил общее представление о веб-шрифтах. Давайте посмотрим на синтаксис font-face:
@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font>; }<fontsrc> = <url> [format(<string>)]
Цитата изcss брошюра
Существует несколько ключевых идентификаторов:
-
url(): Адрес ресурса с кавычками или без них. -
local(): идентификатор локального ресурса, например.local('simsun')указать на местный Arial -
format(): указать формат шрифта
Таким образом, пользовательское определение шрифта обычно выглядит так:
@font-face {
font-family: "PingFangSC";
src: url("./font/PingFangSC/fonts/PingFang-SC-Regular.woff2") format("woff2"),
url("./font/PingFangSC/fonts/PingFang-SC-Regular.woff") format("woff");
}Однако вещи не так просто.
Совместимое написание font-face
В реальной разработке мы всегда можем увидеть следующее написание:
code from postcss-font-magican
@font-face { font-family: "Alice"; font-style: normal; font-weight: 400; src: local("Alice"), local("Alice-Regular"), url("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") format("eot"), url("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") format("woff2"), url("http://fonts.gstatic.com/s/alice/v7/_H4kMcdhHr0B8RDaQcqpTA.woff") format("woff"), url("http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf") format("truetype") }
Видеть кучу кода не многовато? Но на самом деле это определение тоже очень простое.Сначала проверьте, существует ли уже шрифт на машине.Если нет, то по очереди загрузите файл шрифта указанного формата. Но в нем содержится тяжелая работа и упорный труд многих предшественников.
IE8-совместимый
Поскольку браузеры IE8 поддерживают только шрифты в формате EOT, кажется, нам нужно определить его только так:
@font-face {
font-family: "PingFangSC";
src: url("./font/PingFangSC/fonts/PingFang-SC-Regular.eot");
}
@font-face {
font-family: "PingFangSC";
src: url('./font/PingFangSC/fonts/PingFang-SC-Regular.otf');
}Удивительно то, что хоть IE и не поддерживает формат otf, он все равно скачает файл размером 10 МБ+, так что написать так точно не получится.
В IE8- открыть что-то волшебное происходит
Итак, Пол Айриш подытожил два решения кроссбраузерной совместимости, которые широко используются различными плагинами и разработчиками.
Bulletproof font-face
Первый вариант заключается в использованииlocal(), поскольку IE не распознает локальный логотип, IE автоматически игнорирует следующие определения шрифтов и, таким образом, не вызывает загрузку избыточных шрифтов.
@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺︎'), url('GraublauWeb.otf') format('opentype'); }
Здесь указан смайлик, IE будет парсить только в файл eot, в то время как другие браузеры могут корректно парсить в файл otf.
Другой вариант не требуетlocal(), но используя?Символ Помогите IE сделать анализ шрифта:
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}2018 шрифт для письма
Последнее обновление Павла было в 2010 году, а статье уже 7-8 лет. После бесчисленных итераций браузеров woff2 стал новым стандартом рекомендаций W3C.Большое количество браузеров совместимо с woff.На самом деле нам больше не нужно писать плотный код каждый раз, когда мы определяем шрифты. Два простых предложения могут поддерживаться большинством браузеров
@font-face {
font-family: "My font";
src: url("./path/to/font.woff2") format("woff2"),
url("./path/to/font.woff") format("woff");
}Эта нотация хорошо работает в IE9+, IOS5+, Android4.4+ и во всех современных браузерах.
Если вы хотите поддерживать устройства ниже Android 4.4, вам нужно добавить поддержку файла otf, но, как упоминалось выше, файл otf слишком велик, и считается, что производительность недорогих машин Android не очень хорошая. изящно понизить рейтинг этой части пользователей.
Наконец, порекомендуйте веб-сайт для преобразования формата шрифтаfont-converter, бесплатный и может генерировать файлы в нескольких форматах (включая woff2) одновременно, ⚠️ Но будьте осторожны, чтобы не использовать этот веб-сайт для прямого создания правил шрифта.
использованная литература
Embedded_OpenType
OpenType
Web_Open_Font_Format
TrueType
Bulletproof @font-face Syntax
Using @font-face - CSS-Tricks