CSS Font Face, загружать только в том случае, если шрифт не существует

Я включил собственный шрифт на свой веб-сайт (Segoe UI), однако размер файла шрифта составляет около 1 МБ, что занимает несколько секунд для загрузки в первый раз.

Я использую Mac, и этот шрифт не поставляется с OSX. Однако, насколько мне известно, он включен в Windows.

Как я могу заставить CSS только загружать шрифт, если он еще не существует на клиенте?


fonts css font-face
person Patrick Reck    schedule 22.01.2013    source источник
comment
вы принимаете решение javascript?   -  person Fabrizio Calderan    schedule 22.01.2013
comment
Я бы предпочел оставить это в CSS. Однако, если это невозможно, придется сделать JS. Больно иметь такую ​​медленную загрузку главной страницы   -  person Patrick Reck    schedule 22.01.2013
comment
Посмотрите, возможен ли этот дубликат: @ font-face src: local - Как использовать локальный шрифт, если он уже есть у пользователя? может вам помочь.   -  person Fabrizio Calderan    schedule 22.01.2013
comment
Segoe UI не является бесплатным шрифтом, и вам потребуется разрешение от Microsoft, чтобы использовать его в качестве веб-шрифта.   -  person Jukka K. Korpela    schedule 22.01.2013

Ответы (1)


arrow_upward
11
arrow_downward

Использование local('Segoe UI') отработано. Похоже, он расставляет приоритеты по источникам от первого до последнего.

Вот рабочий код

@font-face {
    font-family: Segoe;
    src: local('Segoe UI'), url('fonts/segoeui.ttf') format('truetype'), url('fonts/segoeui.woff') format('woff');
}
person Patrick Reck    schedule 22.01.2013
comment
Имейте в виду, что вам потребуется разрешение от Microsoft для использования этого шрифта на вашем веб-сайте. - person Akaino; 12.09.2018
comment
Вы подтверждаете, что вам действительно не нужна первая строка src в вашем коде? - person Vic Seedoubleyew; 14.08.2019