Почему отображение глифа зависит от браузера? - PullRequest
Новая
       12

Почему отображение глифа зависит от браузера?

0 голосов
/ 03 ноября 2019

Контекст

Я написал домашнюю панель инструментов, которая, среди прочего, обеспечивает визуальную индикацию вероятности дождя в течение следующего часа. Если ожидается дождь, символ displayed отображается (с Open Sans), в противном случае он имеет стиль filter: opacity(10%);.

С точки зрения кода (HTML, CSS, Vue.js), он отображается через

<span class="drop" :class="isDrop(horaires.first.rain, 2)">?</span>

Динамический класс рассчитывается по 

isDrop(rain, level) {
  return rain >= level ? "full" : "empty"
}

, а класс empty равен 

.empty {
  filter: opacity(10%);
}

(класс full еще не определен)

Проблема

В моей среде разработки (Windows 10, Chrome или Firefox) капли выглядят значительно иначе

enter image description here

и фактическая панель инструментов (Raspberry Pi с Debian, Firefox)

enter image description here

Откуда может появиться это несоответствие?

  • источник страницы одинаков в обоих случаях
  • шрифт, используемый на странице, явно загружается через @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');
  • не только фильтрованную версиюотличается (видимый в одном случае, невидимый в другом), но даже не стилизованное перетаскивание выглядит иначе - несмотря на то, что визуализируется с тем же шрифтом.

Ответы [ 2 ]

3 голосов
/ 03 ноября 2019

Это потому, что используемый вами шрифт (Google Open Sans) не включает в себя все символы Юникода, и, что более важно для вас, он не включает эмодзи.

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

Решение состоит в том, чтобы использовать веб-шрифт, который включает эти глифы.

У Google есть шрифт Noto, который обрабатывает только эмодзи, Noto Emoji , но цветная версия составляет 8 МБ только для этих символов смайликов !. Сказав это, чтобы вы поняли, что включить эти глифы в любой веб-шрифт непросто.
Существуют и другие веб-шрифты, которые, кажется, существуют, но все бесплатные, которые я вижу, являются монохромными, поэтому здесь я 'Я буду использовать Google для примера. 

@font-face {
  font-family: "NotoEmoji-Regular";
  src: url("https://cdn.jsdelivr.net/gh/googlefonts/noto-emoji/fonts/NotoEmoji-Regular.ttf") format("truetype");
}
body {
  font-family: "NotoEmoji-Regular";
}
?

Если у вас есть только небольшой набор этих смайликов, которые вы будете использовать, вы, вероятно, могли бы сделать форк из одного или другого открытого шрифта Google, чтобы онвключает в себя только те, которые вам нужны (и быть легче).
Или, если у вас есть хороший дизайнер, вы можете создать свой собственный набор смайликов и использовать сервис, такой как icomoon и др. , чтобы сделатьваш собственный шрифт на основе графики SVG.

1 голос
/ 03 ноября 2019

Каждый браузер имеет свой набор смайликов. вы можете увидеть различные настройки смайликов здесь .
Если вы хотите, чтобы значок отображался одинаково в каждом браузере, вы должны создать набор значков и использовать svg.

...