Какой формат шрифта следует использовать для моего сайта

Я хочу использовать шрифт для своего сайта, я получил общее исследование и нашел множество форматов для шрифтов. Теперь я хочу знать, что это стандартный формат? Или Каковы стандартные форматы?

.TTF (True Type Font)
.EOT (Embedded OpenType)
.OTF (open type font)
.SVG (Scalable Vector Graphics)
.WOFF (Web Open Font Format)

До сих пор я использовал все эти форматы, что-то вроде этого:

@font-face {
    font-family: 'Font';
    src: url('Font.eot'); /* IE9 Compat Modes */
    src: url('Font.eot?#') format('eot'), /* IE6–8 */
         url('Font.ttf') format('truetype'), /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
         url('Font.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('Font.otf') format('opentype'),
         url('Font.svg') format('svg');
}

Но в этом случае сайт слишком тяжелый (размер всех форматов составляет почти 1 МБ). Итак, что мне делать, чтобы быть более оптимизированным?

ОТВЕТЫ

Ответ 1

Общие сведения о типах шрифтовых файлов

  • WOFF/WOFF2

Шрифты WOFF часто загружаются быстрее, чем другие форматы, потому что они используют сжатую версию структуры, используемую шрифтами OpenType (OTF) и TrueType (TTF).

  • SVG/SVGZ

идеально подходит для мобильного использования

  • СРВ

поддерживается только IE

  • OTF/TTF

Формат WOFF был первоначально создан как реакция на OTF и TTF, частично, потому что эти форматы могли легко (и нелегально) копироваться

  • НА ДРУГОЙ СТОРОНЕ:

Google Fonts предлагает это как способ использования своих шрифтов.

  • НЕКОТОРЫЕ СОВЕТЫ ПО ВЫПОЛНЕНИЮ

Посмотрите размер файла

Шрифты могут быть на удивление тяжелыми, так что наклоняйтесь к вариантам, которые предлагают более легкие версии. Например, предпочитаем набор шрифтов, который составляет 50 КБ против одного, который весит 400 КБ. Ограничьте набор символов, если возможно

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

Многие устройства застряли на дерьмовых соединениях. Один трюк может быть нацелен на большие экраны при загрузке пользовательского шрифта с помощью @media.

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

  • ВЫВОД: Используйте экраны OTF/TTF (все браузеры) и EOT (I.E) для настольных компьютеров и используйте системные шрифты для небольших экранов по мере их рендеринга. И рассмотрите шрифты Google. Лучший выбор до сих пор.

Ответ 2

Я только что протестировал хром (43) и firefox (37) и т.е. (10) - во всех случаях был загружен только один формат шрифта (соответственно: woff, woff и eot) из пяти. На основе этой небольшой выборки кажется *, что включение различных типов файлов в ваше объявление @font-face не оказывает отрицательного воздействия на пользователя.

* Если вам известно, как ведут себя другие браузеры, сообщите нам об этом.