1. Введение
1.1 Сценарий
Когда мы отображаем страницу, для лучшего эффекта мы обычно используем пользовательские шрифты.@fant-face.
Раньше я использовал некоторые пользовательские шрифты при разработке, вот краткое изложение некоторых решений, которые я искал.
В этой статье перечислены только введение местного шрифта, шрифт сети из-за ограниченной практики, введенного здесь меньше.
😂 Сделайте из себя дурака 😂
2 основной текст
2.1 Локальные шрифты
2.1.1 Авторское право
Во-первых, обратите внимание на это
2.1.2 Определение шрифта
Общий случай определяется следующим образом:
@font-face {
font-family:"Regular";
src:url('../font/Regular.otf');
}
в одном из шрифтов, которые мы хотим использоватьclassAОпределение выше:
.classA {
font-family:"Regular";
}
2.1.3 Сжатие шрифтов
Требуются обычные китайские шрифты8-10M, который слишком велик для всего проекта, вот 2 метода сжатия, которые я практиковал.
Оба требуют список слов, которые вы использовали.
1 font-spider
Официальный сайт:font-spider.org/
служба поддержки
gulpпостроить плагин
Когда я его использовал, сначала он не сжимался успешно.
Позже я обнаружил, что это было из-за того, что версия шрифта, которую я скачал, была немного низкой.
Вот список URL-адресов загрузки шрифтов, которые я нашел, и я думаю, что это хорошо:www.fontke.com/font/
2 Fontmin
Официальный сайт:ecomfe.github.io/fontmin/
Это удобнее иметь клиент для работы.
2.1.4 Загрузка шрифта
Хотя есть функция сжатия, все используемые шрифты должны быть предоставлены, и я хочу по умолчанию использовать красивый шрифт в своем проекте.
С этим есть проблема, браузеру потребуется некоторое время для загрузки файла шрифта при его первой загрузке.
До завершения загрузки страница будет пустой, что является FOIT (Flash of Invisible Text).
1 FOUT
FOUT (Flash of Unstyled Text) означает, что перед загрузкой шрифта браузер отобразитfont-familyпоследовательные шрифты
Когда загрузка завершена, она будет заменена на определенный шрифт. Настройки следующие:
@font-face {
...
font-display: swap;
...
}
Этот эффект - эффект замены шрифта, который вы увидите на странице 😂
2 FontFaceObserver
Тогда я подумал, есть ли способ сказать, что загрузка шрифта завершена?
Установить:
npm i fontfaceobserver
На странице:
// css 中 @font-face 已定义好
import FontFaceObserver from 'fontfaceobserver'
loadfont(){
console.time("字体加载用时")
var ooo = new FontFaceObserver('Regular')
ooo.load().then(() =>{
document.getElementById('index').style.fontFamily = 'Regular'
console.timeEnd("字体加载用时")
})
},
можно также добавитьloadingАнимация, так эффект лучше 😎
2.2 Веб-шрифты
2.2.1 введен
веб-шрифт:www.webfont.com/
Я нашла способ, на практике не применяла, эффекта не знаю, можете попробовать, если интересно.
3 Постскриптум
Спасибо за поддержку. Если есть какие-то недостатки, пожалуйста, указывайте на них и поощряйте друг друга.
Если вы думаете, что это хорошо, не забудьте поставить лайк, спасибо😂
Добро пожаловать, чтобы следовать за мной: 【Гитхаб】 【Наггетс】 【Краткая книга】
В этой статье используетсяCreative Commons Attribution-NonCommercial-ShareAlike 4.0 Международная лицензияЛицензия.