Веб-фонты или локально загруженные шрифты?

С тех пор неприятности, вызванные использованием Cufon я отважился отказаться от использования внешних ресурсов шрифтов, но в последнее время я искал альтернативные методы загрузки шрифтов, чтобы увидеть, есть ли лучший способ; лучшие методы имеют способ просто появляться из ниоткуда.

есть много новых методов, и вариации для каждого метода кажется; я должен использовать typekit? или google webfonts (с js или css)? должен ли я продолжать использовать локально загружаемые шрифты (например fontsquirrel.com сгенерированный метод)?

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

1. это просто вопрос ситуации и необходимости? Если да, то что это такое?


2. есть ли кардинальные различия между этими методами?


3. есть ли лучший метод, который я не перечислил?


4. что такое pro/con для производительности? Выглядеть? зависимости? совместимость?

я ищу лучшие практики здесь, производительность большая, но так и масштабируемость и удобство использования. Не говоря уже о том, чтобы выглядеть и чувствовать.

Google CSS

• использует только внешнюю таблицу стилей


• использует только самый маленький совместимый тип файла


• можно использовать @import или <link> или взять содержимое styleshee (@font-face) и поместите его непосредственно в свою собственную таблицу стилей.

результаты теста

  78ms load of html

  36ms load of css

метод Google JS

• использует webfont.js чтобы загрузить styleshet


• использует только самый маленький совместимый тип файла


• добавляет :root элемент с классом


• добавляет скрипт в head.

результаты теста

    171ms load of html

    176ms load of js

    32ms load of css

метод Typekit

• добавляет :root элемент с классом.


• можно использовать *.js сниппет или внешне загруженный файл *.js файл


• использует data:font/opentype вместо файла шрифта.


• добавляет скрипт в head


• добавляет встроенный css в head


• 
  

  добавляет внешнюю таблицу стилей в head

  
  
  

  вы можете легко добавлять/удалять/настраивать шрифты и целевые селекторы из 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;



}