Где положить шрифт в CSS?

Когда вы добавляете @font-face в свой сайт один файл css, где это лучшее место для его размещения? Вершина файла css? Низ?

Если вы положите его наверху, я думаю, что это замедлит загрузку css. Если вы добавите снизу, тогда весь текст будет загружать отбрасываемые шрифты до тех пор, пока не будут загружены шрифты, которые также не будут оптимальными. Поэтому, когда вы используете @font-face, а не TypeKit, GoogleFonts и т.д., Куда его поместить?

* Обновление. Чтобы подтвердить это выше, это касается ссылки на "@font-face{font-family:'Ave Regular';src:url('fonts/ave-regular.eot?#iefix')....etc" в файле css, а не на то, куда поместить тело "{ font-family: fontname, arial, serif } etc". И я понимаю, что он "может" идти куда угодно и работать, и поставил ли я сверху или снизу или посередине, не будет "много" разницы, но ищет, что лучше, независимо от того, насколько это незначительно или если это одностороннее лучше в зависимости от определенных вариантов использования.

ОТВЕТЫ

Ответ 1

Если вы поместите его наверху, я думаю, что это замедлит загрузку css.

Нет, это не так. Браузер не будет ждать загрузки шрифтов, прежде чем загружать остальную часть таблицы стилей. Он начнет загружать шрифты асинхронно, но эти загрузки шрифтов не мешают никому, кроме рендеринга страниц (см. FOUT).

Если вы хотели сказать, что наличие правил наверху замедлит его, потому что браузер должен сначала загрузить правила перед остальной частью таблицы стилей, это действительно не имеет значения, если у вас нет десятков килобайт @font-face правила (очень, очень, очень маловероятно).

Нет правил, регулирующих размещение @font-face в таблице стилей, но я обычно придерживаюсь большинства правил в верхней части для организационных целей.

Ответ 2

Если вы положите его сверху или снизу, ему придется некоторое время загружать, поэтому я не думаю, что это действительно важно. Если вы очень заинтересованы в производительности, я рекомендую объединить все ваши CSS в один файл и свести к минимуму его. Таким образом, запросы к серверу ограничены одним, а не 10 (для 10 разных файлов CSS, содержащих разные шрифты и т.д.).

Прочтите это:

С таблицами стилей прогрессивный рендеринг блокируется до тех пор, пока все таблицы стилей были загружены. Вот почему лучше всего двигаться stylesheets в документе HEAD, чтобы они сначала загружались и рендеринг не заблокирован. С помощью сценариев прогрессивный рендеринг заблокирован для всего содержимого ниже script. Перемещение сценариев с низким как можно больше, означает, что больше содержимого script, которое сделанный раньше.

Ref. http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/

Ответ 3

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

Я обычно включаю его либо в body{}, либо html{}

В терминах * performance * это, скорее всего, не имеет большого значения. Что касается удобство обслуживания для себя, было бы лучше с точки зрения вашей умственной производительности иметь его наверху, чтобы вы не укоренялись через CSS, пытаясь найти что-то настолько визуально-эффективное.

Вот как я реализую этот быстрый фрагмент:

body{margin:0; font-family: "CiN", Arial;}
@font-face {
    font-family: "CiN";
    src: url('sling.eot');
    src: local('?'), url('sling.woff') format('woff'), url('sling.ttf') format('truetype'), url('sling.svg#webfontJgTq0KbR') format('svg');
    font-weight: normal;
    font-style: normal;
}

Ответ 4

Начиная с 2016 года, современные браузеры фактически предотвращают FOUT (Flash of Unstyled Text), скрывая текст (делая его прозрачным). (Chrome, например, ждет 3 секунды, затем использует резервный шрифт, если соответствующий шрифт не был загружен к тому времени.) Это разрешено спецификацией CSS3.

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

Модуль шрифтов CSS 3-го уровня (выделено мной)

Но это поведение фактически торгует FOUT (Flash of Unstyled Text) с FOIT (Flash of Invisible Text) и оставляет пользователей на самом деле плохое соединение хуже, чем с FOUT.

Также см. это умное обходное решение (требуется JS).

Ответ 5

Я бы сказал... вы держите свой шрифт внутри тела {font-family: blahblahblah;}