В этой лабораторной работе с кодом показано, как немедленно отобразить текст с помощью Font Face Observer .
Добавить наблюдатель за шрифтом Face
Font Face Observer — это скрипт, который определяет загрузку шрифта. Файл fontfaceobserver.js
уже сохранен в каталоге проекта, поэтому добавлять его отдельно не нужно. Однако вам необходимо добавить для него тег сценария.
- Нажмите Remix to Edit , чтобы сделать проект доступным для редактирования.
- Добавьте тег сценария для
fontfaceobserver.js
вindex.html
:
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
Используйте Font Face Observer
Создание наблюдателей
Создайте наблюдателя для каждого семейства шрифтов, которое оно используется на странице.
- Добавьте следующий скрипт после скрипта
fontfaceobserver.js
. Это создаст наблюдателей для семейств шрифтов «Pacifico» и «Roboto»:
<script src="fontfaceobserver.js" type="text/javascript"></script>
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
</script>
<body>
Если вы когда-либо не уверены, какие наблюдатели шрифтов вам нужно создать, просто найдите объявления font-family
в вашем CSS. Передайте имя font-family
этих объявлений в FontFaceObserver()
. Нет необходимости создавать обозреватель шрифтов для резервных шрифтов .
Например, если ваш CSS был:
font-family: "Times New Roman", Times, serif;
вы бы добавили FontFaceObserver('Times New Roman')
. Times и serif являются резервными шрифтами, поэтому вам не нужно объявлять для них FontFaceObservers.
Определить загрузку шрифта
Код для обнаружения загрузки шрифта выглядит следующим образом:
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
— это обещание, которое выполняется при загрузке шрифта.
Демонстрационный сайт использует два разных шрифта, поэтому вам нужно использовать Promise.all()
чтобы дождаться загрузки обоих шрифтов.
- Добавьте это обещание в свой скрипт прямо под только что объявленными FontFaceObservers:
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️Регистрация
Теперь ваш скрипт должен выглядеть так:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
</script>
Применить класс fonts-loaded
- Замените комментарий
/* Do things */
в скрипте этой строкой:
document.documentElement.classList.add("fonts-loaded");
Это добавит класс fonts-loaded
в корневой элемент документа (тег <html>
) после загрузки обоих шрифтов.
✔️Регистрация
Готовый сценарий должен выглядеть так:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
document.documentElement.className += " fonts-loaded";
});
</script>
Обновить CSS
Ваша страница должна быть стилизована так, чтобы изначально использовать системный шрифт, а после применения класса fonts-loaded
пользовательские шрифты.
- Обновите CSS:
.header {
html.fonts-loaded .header {
font-family: 'Pacifico', cursive;
}
.text
html.fonts-loaded .text {
font-family: 'Roboto', sans-serif;
}
Проверять
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
Если страница выглядит так, значит, вы успешно внедрили Font Face Observer и избавились от «Мигания невидимого текста».
,В этой лабораторной работе с кодом показано, как немедленно отобразить текст с помощью Font Face Observer .
Добавить наблюдатель за шрифтом Face
Font Face Observer — это скрипт, который определяет загрузку шрифта. Файл fontfaceobserver.js
уже сохранен в каталоге проекта, поэтому добавлять его отдельно не нужно. Однако вам необходимо добавить для него тег сценария.
- Нажмите Remix to Edit , чтобы сделать проект доступным для редактирования.
- Добавьте тег сценария для
fontfaceobserver.js
вindex.html
:
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
Используйте Font Face Observer
Создание наблюдателей
Создайте наблюдателя для каждого семейства шрифтов, которое оно используется на странице.
- Добавьте следующий скрипт после скрипта
fontfaceobserver.js
. Это создаст наблюдателей для семейств шрифтов «Pacifico» и «Roboto»:
<script src="fontfaceobserver.js" type="text/javascript"></script>
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
</script>
<body>
Если вы когда-либо не уверены, какие наблюдатели шрифтов вам нужно создать, просто найдите объявления font-family
в своем CSS. Передайте имя font-family
этих объявлений в FontFaceObserver()
. Нет необходимости создавать обозреватель шрифтов для резервных шрифтов .
Например, если ваш CSS был:
font-family: "Times New Roman", Times, serif;
вы бы добавили FontFaceObserver('Times New Roman')
. Times и serif являются резервными шрифтами, поэтому вам не нужно объявлять для них FontFaceObservers.
Определить загрузку шрифта
Код для обнаружения загрузки шрифта выглядит следующим образом:
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
— это обещание, которое выполняется при загрузке шрифта.
Демонстрационный сайт использует два разных шрифта, поэтому вам нужно использовать Promise.all()
чтобы дождаться загрузки обоих шрифтов.
- Добавьте это обещание в свой скрипт прямо под только что объявленными FontFaceObservers:
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️Регистрация
Теперь ваш скрипт должен выглядеть так:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
</script>
Применить класс fonts-loaded
- Замените комментарий
/* Do things */
в скрипте этой строкой:
document.documentElement.classList.add("fonts-loaded");
Это добавит класс fonts-loaded
в корневой элемент документа (тег <html>
) после загрузки обоих шрифтов.
✔️Регистрация
Готовый сценарий должен выглядеть так:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
document.documentElement.className += " fonts-loaded";
});
</script>
Обновить CSS
Ваша страница должна быть стилизована так, чтобы изначально использовать системный шрифт, а после применения класса fonts-loaded
пользовательские шрифты.
- Обновите CSS:
.header {
html.fonts-loaded .header {
font-family: 'Pacifico', cursive;
}
.text
html.fonts-loaded .text {
font-family: 'Roboto', sans-serif;
}
Проверять
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
Если страница выглядит так, значит, вы успешно внедрили Font Face Observer и избавились от «Мигания невидимого текста».