Унижение символов Unicode для веб-браузеров с отсутствующими шрифтами - PullRequest
19 голосов
/ 03 сентября 2010

Я использую Unicode 'CHECK MARK' (U + 2713) в HTML-документе. Я считаю, что в большинстве браузеров он отображается нормально, но иногда я сталкиваюсь с кем-то с отсутствующим шрифтом на их ПК. Существуют ли какие-либо хитрости HTML / JS для указания альтернативного отображаемого символа (или изображения), если шрифт отсутствует?

Ответы [ 4 ]

7 голосов
/ 04 сентября 2010

Нет прямого способа определить, был ли какой-либо конкретный символ представлен полезным способом. Все, что вы можете сделать из JavaScript, это создать <span>, содержащий один (или несколько) целевого символа в целевом шрифте, и сравнить его ширину с другим <span>, содержащим такое же количество символов, которое вы не будете отображать. полезно (*). Если они имеют одинаковую ширину, скорее всего, у вас есть множество ящиков или вопросительных знаков в каждом, так что вы можете принять меры резервного копирования, такие как добавление изображения.

Так как это довольно много раздражает, вы можете предпочесть просто пойти на изображение. Или вы можете попробовать использовать встраивание @font-face в современных браузерах, чтобы использовать шрифт заведомо хорошего качества. Поскольку обычно IE имеет плохую поддержку отката шрифтов Unicode, обязательно включите шрифт EOT.

(*: вы можете попробовать символ, который в настоящее время не назначен и, будем надеяться, останется таким, например. U + 08FF, или гарантированно-недействительный символ, такой как U + FFFF, хотя сомнительно, что вам разрешено помещать его HTML-документ.)

4 голосов
/ 08 сентября 2010

Это не совсем то, что вы просите, но это может решить вашу проблему (при условии, что ваша цель - вывод HTML без необходимости полагаться на внешние изображения и т. Д.)

Рассматривали ли вы данные изображенияURL-адреса (также известные как RFC2397): http://www.ietf.org/rfc/rfc2397.txt

Вместо использования:

&#x2713;

для обозначения галочки, вы должны использовать:

<img src="data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsj
zmpzmj0FADs="/>

Thisне потребует установки каких-либо определенных шрифтов Unicode с символом CHECK MARK на стороне клиента, НО это не будет работать в Internet Explorer 7 или ниже.(Internet Explorer 8, Firefox, Safari и т. Д. Должны работать нормально)

0 голосов
/ 07 сентября 2010

Если вы можете придумать способ удаленной проверки, установлен ли MS Office 2000 или более новый, вы должны быть в состоянии предположить, что Arial Unicode MS установлен и, следовательно, имеет этот код в шрифте (если у вас есть CSS).семейство шрифтов настроено на что-то вроде «Arial Unicode MS, Arial, sans-serif»).

Я считаю, что это будет работать только в Microsoft Internet Explorer, но вы должны быть в состоянии обнаружить установку Word, пытаясь создатьего объект ActiveX в JavaScript:

if(new ActiveXObject("Word.Application"))
{
    window.alert("Word is installed, go ahead and use the Unicode check mark in HTML");
}
else
{
    window.alert("Word is not installed, use your image of a check mark.");
}

Но, учитывая, что это действительно работает только в IE, вероятно, выдает предупреждение безопасности в IE8, и вам все еще нужен механизм отката для других браузеров или браузеров IE без MS OfficeИспользование изображения все время, вероятно, лучший способ.

0 голосов
/ 03 сентября 2010

Юникод довольно стандартный, я всегда использую unicodemap.org. Вот символ, который вы используете [ссылка] , это даст вам все коды, связанные с галочкой Если вам нужна полная обратная совместимость, вам нужно использовать реальное изображение. 1 файл изображения для галочки является более легким, чем хакер / плагин javascript. Вероятно, ваша лучшая альтернатива.

...