Включая ссылку или импорт Google Web Fonts?
Каков предпочтительный способ включения веб-шрифтов Google на страницу?
через тег ссылки?
через импорт в таблицу стилей?
@import url (http://fonts.googleapis.com/css?family=Kameron:400,700);
или используйте загрузчик веб-шрифтов
7 ответов
В 90%+ случаев вы, вероятно, хотите <link> тег. Как правило, вы хотите избежать @import правила, потому что они откладывают загрузку включенного ресурса, пока файл не будет извлечен... и если у вас есть процесс сборки, который "выравнивает" @import, то вы создаете еще одну проблему с веб-шрифтами: динамические провайдеры, такие как Google Web Fonts, обслуживают платформу версии шрифтов, так что если вы просто добавите содержимое, то на некоторых платформах вы получите сломанные шрифты.
Теперь, зачем вам использовать загрузчик веб-шрифтов? Если вам нужен полный контроль над тем, как загружаются шрифты. Большинство браузеров будут откладывать рисование контента на экране до тех пор, пока весь CSS не будет загружен и применен - это позволяет избежать проблемы "flash of unstyled content". Недостатком является то, что... у вас может быть дополнительная пауза и задержка, пока содержимое не станет видимым. С помощью загрузчика JS вы можете определить, как и когда шрифты станут видимыми... например, вы даже можете добавить их после того, как исходный контент будет нарисован на экране.
Еще раз, 90% случаев <link> tag: используйте хороший CDN, и шрифты будут быстро сжиматься и, что еще более вероятно, доставляться из кеша.
Для получения дополнительной информации и подробного ознакомления с Google Web Fonts, посмотрите это видео GDL
Если вы заботитесь о SEO и производительности, то лучше использовать Link. потому что он может использовать предварительную загрузку, чтобы загрузить его.
Пример:
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
прочитайте это для получения дополнительной информации прочитайте это: https://ashton.codes/preload-google-fonts-using-resource-hints/
Я понимаю, что предложение из других ответов заключается в использовании в файлах html.
Недавно я понял, что у меня есть вариант использования внутри файла css.
Причина проста: я делаю статические сайты для своих побочных проектов и ценю удобство выше SEO или совместимости с редкими платформами и т. Д.
Преимущество использования внутри файла css заключается в том, что если я хочу изменить шрифты, все, что мне нужно сделать, это изменить несколько строк в файле css. Вот и все, конец истории. Если я использую
Короче говоря:
Использовать <link> предоставлено Google, потому что есть версия для шрифта, но прямо над ним используется функция предварительного соединения HTML5, чтобы попросить браузеры открыть TCP-соединение и заранее согласовать SSL с fonts.gstatic.com. Вот пример, который, очевидно, должен находиться в вашем <head></head> тег:
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
лично я предпочитаю<link>.
Вот как я загружаю свои шрифты:
<link href="https://fonts.googleapis.com/css2?family=Judson:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
Вы можете сэкономить время на запрос
... если вы потратите дополнительное время на кодирование.
Это на самом деле ничего страшного, просто откройте упрощенную однострочную ссылку Google:
http://fonts.googleapis.com/css?family=Kameron:400,700
и посмотрим, что это даст вам:
/* latin */
@font-face {
font-family: 'Kameron';
font-style: normal;
font-weight: 400;
src: local('Kameron'), url(https://fonts.gstatic.com/s/kameron/v8/vm82dR7vXErQxuzngLk6Lg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Kameron';
font-style: normal;
font-weight: 700;
src: local('Kameron Bold'), local('Kameron-Bold'), url(https://fonts.gstatic.com/s/kameron/v8/vm8zdR7vXErQxuzniAIfO-rpfQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Да, это только пара других запросов. Начать с них быстрее - даже быстрее, если вы скачаете файлы шрифтов на свой сервер и добавите URL-адрес localhost перед файлами Google. Я знаю, я знаю, нам нравятся CDN и паралельные запросы, они должны быть быстрее, но попробуйте сами.
Теперь о первоначальном вопросе: не @import, не , просто поместите этот код прямо в существующий глобальный CSS, он лучше всего подходит для вашего сервера. Он не нуждается в запросе "плюс", это не отдельный шаг - только очень небольшое увеличение размера файла, которое практически ничего не добавит к времени обработки запроса. Будет ли на это красиво смотреть? Нет... Но, надеюсь, ваш сайт получит гораздо больше запросов, чем ревизий:) Так что помогите серверу, а не себе.
В целом, я думаю, что стоит дополнительная миля.
Однострочная версия не предназначена для того, чтобы быть эффективной, но простой - для блогеров, которые хотят самый простой способ. Ты знаешь лучше.
Спасибо за все отличные ответы. Мой недавний опыт работы с проектом приложения React также соответствует принятому ответу. Лучше использовать, если вы загружаете его из CDN . Если шрифт находится в вашем локальном каталоге, загрузите его с помощью