Как определить, какой из указанных шрифтов был использован на веб-странице? - PullRequest
121 голосов
/ 04 августа 2008

Предположим, у меня на странице следующее правило CSS:

body {
    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

Как определить, какой из определенных шрифтов был использован в браузере пользователя?

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

В настоящее время я показываю ссылку на шрифт для всех пользователей, я хочу показывать ее только тем людям, у которых не установлен правильный шрифт.

Ответы [ 11 ]

0 голосов
/ 30 ноября 2017

Вы можете поместить Adobe Blank в семейство шрифтов после того шрифта, который хотите увидеть, и тогда любые глифы, не принадлежащие этому шрифту, не будут отображаться.

например:.

font-family: Arial, 'Adobe Blank';

Насколько мне известно, не существует метода JS, позволяющего определить, какие глифы в элементе отображаются каким шрифтом в стеке шрифтов для этого элемента.

Это осложняется тем фактом, что в браузерах есть пользовательские настройки для шрифтов с засечками / sans-serif / monospace, а также у них есть свои жестко заданные резервные шрифты, которые они будут использовать, если глиф не найден ни в одном из шрифты в стеке шрифтов. Таким образом, браузер может отображать некоторые глифы в шрифте, которого нет в стеке шрифтов или в настройках шрифта браузера пользователя. Chrome Dev Tools покажет вам каждый отображаемый шрифт для глифов в выбранном элементе . Таким образом, на вашем компьютере вы можете видеть, что он делает, но нет способа узнать, что происходит на компьютере пользователя.

Также возможно, что система пользователя может сыграть в этом роль, например, Окно выполняет подстановку шрифтов на уровне глифов.

так ...

Для глифов, которые вас интересуют, у вас нет возможности узнать, будут ли они отображаться браузером / системным резервом пользователя, даже если у них нет указанного вами шрифта.

Если вы хотите протестировать его в JS, вы можете визуализировать отдельные глифы с семейством шрифтов, в том числе Adobe Blank, и измерить их ширину, чтобы определить, равен ли он нулю, НО вам нужно будет выполнить итерацию каждого глиф и каждый шрифт, который вы хотите протестировать , но, хотя вы можете знать шрифты в стеке шрифтов элементов, нет никакого способа узнать, какие шрифты настроен для использования браузером пользователя, так что по крайней мере для некоторых ваших пользователей список итерированных шрифтов будет неполным. (Это также не является будущим доказательством, если новые шрифты появятся и начнут привыкать.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...