WebFontLoader: Почему декларация шрифта для ванили не достаточна для резервных копий?

Мне нравится использовать WebFontLoader для загрузки шрифтов. Это быстрое решение, которое хорошо сработало для меня. Я обычно использую его асинхронно, помещая что-то подобное в моей странице <head>:WebFontLoader: Почему декларация шрифта для ванили не достаточна для резервных копий?

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" async></script> 

WebFontConfig = { 
    google: { 
    families: ['Droid Sans', 'Droid Serif'] 
    } 
};

Тогда в моем CSS, я буду делать что-то вроде этого:

h1 { 
    font-family: 'Droid Sans', Helvetica, Arial, sans-serif; 
}

Я читала в последнее время о WebFontLoader, хотя, и большинство примеров, которые я вижу (вот один article об этом) вместо того, чтобы сделать что-то вроде этого, используя классы, WFL относится к <html> элемент для обнаружения загружен ли шрифт и готов к использованию:

h1 { 
    font-family: Helvetica, Arial, sans-serif; 

    .wf-active & { 
    font-family: 'Droid Sans', Helvetica, Arial, sans-serif; 
    } 
}

Мой вопрос: Почему недостаточно обычного стека шрифтов с системными резервными копиями? Не является ли пункт шрифта семейством, так что если первый не распознается, он автоматически возвращается к остальным?

Если браузеры видят, что первый шрифт в стеке не является системным, будет ли он по умолчанию скрывать этот элемент, несмотря на наличие резервных копий - или что-то в этом роде?

источник

2017-02-09 Andrew Gibson

Это не то, что означает «шрифт-семья»; семейство шрифтов - это любая коллекция шрифтов, которая состоит из одного или нескольких выражений одного всеобъемлющего типа, поэтому, например, «Droid Sans» - это семейство, с отдельными шрифтами «Droid Sans Regular», «Droid Sans Bold», «Droid Sans UltraThin "и т. Д. Все это разные шрифты * (то есть отдельные файлы на диске), но все они являются частью одного семейства * шрифтов *. В CSS вы можете перечислить * несколько семейств шрифтов для свойства 'font-family' для браузера, чтобы« провалиться »(так же, как вы можете указать несколько значений для одного свойства' src' '@ font-face') –

Почему для обычного стека шрифтов с резервным копированием системы недостаточно?

Это является достаточно, если все, что вам нужно сделать, это использовать шрифты, как только они доступны. Но, возможно, вы хотели бы сделать больше в тот момент, когда вам гарантированы, что ваши шрифты готовы к использованию, и в этом случае использование класса CSS помогает делать гораздо более мощные вещи. Таким образом, большинство примеров покажут вам версию «больше власти», а не ограниченный вариант использования: использование класса в элементе <html> позволяет вам запускать любую функциональность и рестайлинг, которые вы можете захотеть, когда веб-сайты готовы ,

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

<html> 
    ... 
    <div class="font-loading">Please wait while the fonts load.</div> 
    ... 
</html>

с некоторой формой CSS, что делает

.font-loading { 
    background: red; 
    color: white; 
    border: 1px solid black; 
    opacity: 1; 
    height: 4em; 
    transition: opacity 1s ease-in, height 1s ease-in; 
} 

.wf-active .font-loading { 
    opacity: 0; 
    height: 0; 
}

Имея что wf-active класс добавляется в <html> элемент явно дает всю вашу страницу сигнал, который может быть использован для «делать то, что нужно произойдет, когда все мои веб-сайты будут готовы к использованию », что-то вроде очень отличается от от« использования шрифтов, когда они будут готовы ».

источник

2017-02-09 04:24:06

спасибо. Больше всего на свете я хотел проверить, что я не делал что-то ужасно неправильно, не используя подход .wf-active. Очень признателен. –

WebFontLoader: Почему декларация шрифта для ванили не достаточна для резервных копий?

ответ

Смежные вопросы