Почему некоторые определенные символы Юникода не отображаются в Google Chrome? - PullRequest
3 голосов
/ 13 января 2012

На той же машине, использующей один и тот же шрифт (Arial), я получаю разную текстовую разметку от Chrome и IE9:

<html>
<head>
</head>
<body style="font-family: Arial;">
IIIIIIIII&#x2AF8;
IIIIIIIII&#x2B46;
IIIIIIIII&#x2A20;
IIIIIIIII&#x27A4;
IIIIIIIII&#x27A7;
IIIIIIIII&#x269E;
IIIIIIIII&#x25B6;
</body>
</html>

Это выглядит так: enter image description here

Почему это происходит? Есть ли способ заставить Chrome правильно отображать две сломанные стрелки, которые правильно отображаются в IE? (Позиции 1 и 3)

Ответы [ 2 ]

4 голосов
/ 13 января 2012

Ваше имя свойства CSS имеет опечатку, font-familiy вместо font-family, поэтому объявление игнорируется. Однако объявление в любом случае не сильно повлияет на рендеринг, поскольку Arial не содержит используемых специальных символов. Это означает, что браузеры будут пытаться подбирать глифы из разных шрифтов, и их методы могут отличаться; IE печально известен тем, что во многих случаях он этого не делает: он часто не может отобразить символ, даже если какой-то шрифт в системе содержит его.

Чтобы улучшить визуализацию, вам необходимо проанализировать поддержку различных символов в общедоступных шрифтах и ​​написать подходящие списки в качестве значений для свойства font-family. Вы можете определить разные списки для разных символов, заключив их в элементы span (или, почему бы и нет, font).

Например, первый специальный символ U + 2AF8 (&#x2AF8;) присутствует только в нескольких шрифтах, хотя в дополнение к перечисленным в http://www.fileformat.info/info/unicode/char/2af8/fontsupport.htm шрифт Cambria Math также содержит его. Таким образом, вы могли бы использовать для этого

font-family: Cambria Math, Symbola, Quivira, STIX, Code2000;

Вам также следует установить для свойства line-height для элемента вмещающего блока (например, p) разумное значение, например 1,3. В противном случае очень большая высота строки в Cambria Math может привести к слишком большому расстоянию между строками.

1 голос
/ 13 января 2012

В вашем HTML-коде отсутствует объявление Doctype, но, что еще важнее, в нем отсутствует объявление набора символов.

Прочтите эту статью для получения дополнительной информации:

Абсолютный минимум Каждый разработчик программного обеспечения Абсолютно, положительно должен знать о Unicode и наборах символов (без оправданий!)

РЕДАКТИРОВАТЬ : более вероятно, что эти конкретные символы отсутствуют в различных наборах шрифтов по умолчанию для ОС / браузера. Вы можете объявить правильные шрифты, но если в системе пользователя они не установлены, эта проблема будет сохраняться. Я проверил код в ответе Юкки, который, на мой взгляд, является правильным, и я не могу заставить его работать в Safari Mac, потому что эти шрифты не установлены в моей системе.

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