Обнаружить поддержку символов браузера в JavaScript? - PullRequest
Новая
       4

Обнаружить поддержку символов браузера в JavaScript?

24 голосов
/ 08 января 2011

Я работаю над сайтом, связанным с музыкой, и часто использую специальные символы HTML для острых предметов (fl) и плоских (♭) вещей, чтобы сохранить красоту, например: 

♯
♭

ОднакоМы заметили, что в некоторых браузерах (IE6, Safari для ПК) эти символы не поддерживаются.Я создал условный JavaScript, который обслуживает простые, поддерживаемые символы вместо специальных (G # для G♯ и Bb для B ♭).Но мне трудно понять, как определить, в каких браузерах отсутствуют эти символы.

Я знаю, что могу проверить браузер (например, ie6), но я надеялся сделать все правильно и проверить на поддержка символов сама.

Кто-нибудь знает хороший способ сделать это, используя javascript, jQuery или rails?(Страница обслуживается приложением rails, поэтому объект запроса и любая другая магия Rails находится на столе.

Ответы [ 4 ]

22 голосов
/ 08 января 2011

Если вы создаете два SPAN, один из которых содержит нужный вам символ, а другой содержит непечатаемый символ U + FFFD (�), то вы можете проверить, имеют ли они одинаковую ширину. 

<div style="visibility:hidden">
  <span id="char-to-check">&#9839;</span>
  <span id="not-renderable">&#xfffd;</span>
</div>
<script>
  alert(document.getElementById('char-to-check').offsetWidth ===
        document.getElementById('not-renderable').offsetWidth
        ? 'not supported' : 'supported');
</script>

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

3 голосов
/ 08 января 2011

«Поддержка браузера» здесь не проблема.Вы должны обслуживать свои файлы как UTF-8 * и использовать соответствующие символы, а не объекты HTML.

  • Резкий символ Unicode: ♯ (U + 266F)
  • Плоский символ Unicode: ♭ (U + 266D)

Вы также должны сохранить свои файлы в UTF-8 (ине, скажем, ASCII или ISO-8859-1).

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

* Я не парень по Rails, но я думаю, что он делает это по умолчанию.

0 голосов
/ 08 сентября 2018

Вместо того, чтобы возиться с JavaScript, вы должны вместо этого использовать css unicode-range : 

@font-face {
  font-family: 'MyWebFont'; /* Define the custom font name */
  src:  local("Segoe UI Symbol"),
        local("Symbola"),
        url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
  unicode-range: U+266F, U+266D; /* Define the available characters */
}

body {
  font-family: 'MyWebFont', Arial;
}
&#9839;
&#9837;
Normal text

В блоках local определите шрифты, которые люди могли установить локально, и содержащие нужные вам символы (например, символ пользовательского интерфейса Segoe в Window). Затем определите веб-шрифт (я предлагаю Symbola ), содержащий символ, который вы хотите показать.

Директива unicode-range указывает поддерживающим браузерам ( IE9 и выше ) не загружать шрифт, если на странице нет указанных символов (Вы можете найти их номер Unicode, выполнив поиск Unicode- Таблицы .)

Если у них уже есть шрифт, он его не загрузит. Если символы на странице отсутствуют, а ваш браузер не старше грязи, шрифт не будет загружен. Он будет загружен только тогда, когда это необходимо.

(Если вы все еще хотите поддерживать старый IE, используйте fontsquirrel , чтобы сгенерировать исходное выражение @ font-face, а затем добавьте части local и unicode-range самостоятельно.

0 голосов
/ 08 января 2011

Добавьте это к своему HTML 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 

</head>

И проверьте, правильно ли IE и Safari отображают страницу правильно.

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

Нет похожих вопросов

...