З тих пір, як виникли проблеми з використанням Cufon, я наважився не використовувати зовнішні ресурси шрифту, але, як пізно, я шукав альтернативні методи завантаження шрифтів, щоб побачити, чи є кращий спосіб; кращі методи мають спосіб просто проявитись із синього боку.
Існує багато нових методів, і варіантів для кожного методу здається; Чи варто використовувати typekit ? або google webfonts (з js або css)? чи варто продовжувати використовувати локально завантажувані шрифти (наприклад, метод, створений fontsquirrel.com)?
Я перерахую методи, які здаються найбільш добре отриманими нижче, з деякими тестами, але чи дійсно варто перейти на веб-шрифт? Здається, він би переносив більшу завантаженість ресурсів (http-запити) та мав менше типів файлів (менше сумісності) тощо.
- Це лише питання ситуації та потреби? Якщо так, то що вони?
- Чи існують різкі відмінності між цими методами?
- Чи є кращий метод, який я там не перелічив?
- Які виробники / проти є ефективними? Подивіться? залежності? сумісність?
Я дійсно шукаю тут найкращих практик, продуктивність - це велика річ, але це масштабність та простота використання. Не кажучи вже про те, щоб виглядати і відчувати.
Google CSS
- використовує лише зовнішні таблиці стилів
- використовує лише найменший сумісний тип файлу
- Ви можете використовувати
@importабо<link>брати вміст стилів (@font-face) та вкладати його безпосередньо у свій власний таблицю стилів.
результати тесту
78ms load of html 36ms load of css
Метод Google JS
- використовує
webfont.jsдля завантаження таблиці стилів - використовує лише найменший сумісний тип файлу
- додає
:rootелемент з класом - додає сценарій до голови.
результати тесту
171ms load of html 176ms load of js 32ms load of css
Метод типукіта
- додає
:rootелемент з класом. - може використовувати
*.jsфрагмент або завантажений зовні файл*.jsфайлу - використовує
data:font/opentypeзамість файлу шрифту. - додає сценарій до голови
- додає вбудований css до голови
додає зовнішню таблицю стилів до голови
Ви можете легко додавати / видаляти / коригувати шрифти та націлені вибрані з typekit.com
результати тесту
169ms load of html 213ms load of js 31ms load of css 3ms load of data:font/
... і метод шрифтової білки
@font-face{
font-weight:400;
font-style:normal;
font-family:open_sanslight;
src:url(../font/opensans-light-webfont.eot);
src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
url(../font/opensans-light-webfont.woff) format(woff),
url(../font/opensans-light-webfont.ttf) format(truetype),
url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}… Або з даними: метод шрифту…
@font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont-f.eot');
}
@font-face {
font-family: 'open_sanslight';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
url('opensans-light-webfont-f.ttf') format('truetype'),
url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>
Georgianвеб-шрифтів. Я використовую метод font-squirrel, і я хотів би бачити чудову відповідь і на це питання.
@font-faceдекларації, можливо, ви можете знайти корисну інформацію. paulirish.com/2009/bulletproof-font-face-implementation-syntax