Как загрузить веб-шрифт, например, шрифт, потрясающий при загрузке страницы?

Question

Этот вопрос относится к ситуациям, когда веб-шрифта не требуется на главной странице и первоначально внутри div набор для display:none;

У меня есть веб-страницу, которая загружает скрытую форму с помощью Javascript по щелчку и эта форма использования веб-шрифт. Моя проблема заключается в том, что есть одна секунда задержки, когда пользователь нажимает, чтобы открыть форму, так как в этот момент Chrome загружает файл woff2.

Это не очень приятно для пользователя.

Мне нужно предварительно загрузить webfont, поскольку у меня нет использования шрифта на главной странице, так что Chrome не может извлечь файл woff2, прежде чем пользователи нажмут, чтобы открыть скрытую форму.

Я заметил, что это не имеет значения, если вы размещаете шрифт Awesome на своем сервере или используете CDN.

Я посмотрел в Интернете, чтобы посмотреть, что можно сделать, я попробовал все ниже, и ничто из этого не помогло, ничто не вызвало загрузку загружаемого на страницу загрузки файла woff2, оно только когда-либо загружалось, когда веб-страница активно нуждалась в шрифт.

Попытка 1: Преднатяг

<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2"> 

или

<link rel="preload" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2" as="font"> 

Попытка 2: Предвыборка

<link rel="prefetch" href="form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2"> 

Попытка 3: CSS

@font-face { 
    font-family: 'Font-Awesome'; 
    src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2");; 
} 

Когда я смотрел вокруг, я начал видеть возможные решения с на основе Java-загрузки, то, что я действительно не хотел идти рядом, так, что мои варианты здесь?

Answer 1

Я закончил с этим простым решением, оно не было протестировано ни на что иное, кроме Chrome, но это довольно просто для моего использования, я не могу себе представить, что он не работает в каком-либо современном браузере.

Я решил принудительно загрузить файл woff2, загрузив шрифт на мою главную страницу, но убедитесь, что пользователи его не видят.

Как я уже обнаружил, Chrome не получать ресурсы, которые необходимы любой div, который установлен на display:none;

Так вот мое решение вместо этого.

CSS

.div-fake-hidden { 
    width:0px; 
    height:0px; 
    overflow:hidden; 
} 

HTML

<!-- This fake div hidden preloads our web font! --> 
<div class="div-fake-hidden"><i class="fa fa-square-o fa-3x"></i></div> 

Теперь браузер загружает woff2 ресурс на странице загрузки, так что, когда мои пользователи нажимают на кнопку, чтобы выявить скрытые формы, то веб-шрифт загружается немедленно.

Answer 2

Вам не нужен скрытый div, чтобы ваш шрифт работал. До тех пор, пока вы используете поддерживаемый браузер (картинка от w3schools), правило css @font-face должно работать нормально.

Вы также можете добавить больше форматов шрифта следующим образом:

@font-face { 
font-family: 'Font-Awesome'; 
src: url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff2') format("woff2"), 
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.woff') format('woff'), 
url('form/font-awesome-4.5.0/fonts/fontawesome-webfont.ttf') format('truetype'); 
} 

Answer 3

Вы можете попробовать использовать Web Font Loader: https://github.com/typekit/webfontloader

Web Font Loader дает дополнительный контроль при использовании связанных шрифтов через @ font-face. Он обеспечивает общий интерфейс для загрузки шрифтов независимо от источника, а затем добавляет стандартный набор событий, которые вы можете использовать для управления загрузкой. Веб-загрузчик шрифтов может загружать шрифты из Google Fonts, Typekit, Fonts.com и Fontdeck, а также для самостоятельных веб-шрифтов. Он совместно разработан Google и Typekit.