Я считаю, что причина заключается в том, чтобы свести к минимуму общий размер файла/время загрузки.
Некоторые устройства имеют ограничение в 25 кБ, чтобы поддерживать файлы, «кэшированные». Когда TTF и WOOF имеют base64, файл CSS может превышать лимиты и вызывать перезагрузку каждого посещения.
Браузеры будут использовать первый шрифт «он может» (или «каскад», если хотите). Вы увидите форматы, перечисленные в следующем порядке по следующим причинам:
1. EOT - используется для уловления более старого IE (< 9).
IE задохнется с несколькими «src». Вы часто видите? #iefix, участвующий в ссылке EOT, или дополнительный селектор с только файлом EOT, за которым следует аналогичный селектор с его WOFF и TTF. Кроме того, поскольку старый IE не выполняет datauri, мы должны оставить его как внешний файл.
2. WOFF - Большинство современных браузеров.
Большинство современных браузеров будут использовать WOFF. Этот формат очень мал, даже с кодировкой base64. Поэтому сохранение его в CSS имеет смысл. Плюс WOFF может не загружаться через FTP должным образом и/или у сервера может не быть соответствующего набора mime для расширения WOFF.
3. TTF - используется для улавливания Android и некоторых старых браузеров.
Старые браузеры, которые нуждаются в TTF являются: - старый Safari (5,0) - старый IOS (< 4,2) - старый Opera (10,0) Опять же, в том числе TTF как "тяжелый" base64, файл CSS может быть слишком большой для некоторых устройств для кеширования. Сохранение TTF в виде двоичного файла и внешнего файла является умным, потому что оно будет загружаться/использоваться только при необходимости.
Вот простая схема основана на данных caniuse.com в:
---------------
EOT
---------------
IE >= 6
FF -
Chrome -
Safari -
Opera -
O mini -
O Mobi -
IOS -
Android -
---------------
WOFF
---------------
IE >= 9
FF >= 3.6
Chrome >= 16
Safari >= 5.1
Opera >= 11.6
O mini -
O Mobi >= 11.0
IOS >= 5
Android -
---------------
TTF
---------------
IE -
FF >= 3.6
Chrome >= 16.0
Safari >= 5.0
Opera >= 11.6
O mini -
O Mobi >= 10.0
IOS >= 4.2
Android >= 2.2