При использовании шрифта Montserrat из Google Fonts и установке языка HTML на болгарский в некоторых браузерах некоторые символы отображаются некорректно.
При использовании другого шрифта (например, Roboto) или оставив собственный шрифт браузера, текст отображается правильно.
При настройке другого кириллического языка (например, русского) символы также отображаются правильно.
Монтсеррат утверждает, что поддерживает кириллицу иРасширенная кириллица.
Локально не установлена копия Монтсеррата.
Включение шрифта с использованием расширенного синтаксиса (<link href="https://fonts.googleapis.com/css?family=Montserrat&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">) не дает разницы.
Чтопроисходит?
Мы не можем легко изменить шрифт или язык из-за соответственно клиента и CMS.
При использовании болгарского языка символы неправильно отображаются на Монтсеррате:
При использовании русского языка символы отображаются везде:
Мыпровел следующие тесты:
- Chrome 71.0.3578.98 в Windows 10 Enterprise 17134.556: проблема
- Firefox 64.0.2 в Windows 10 Pro 17134.523: проблема
- Internet Explorer 11.523.17134.0 в Windows 10 Enterprise 17134.556: проблема отсутствует
- Edge 42.17134.1.0 в Windows 10 Enterprise 17134.556: проблема отсутствует
- Chrome 71.0.3578.98 в MacOS 10.13.6: проблема отсутствует
Ниже приведен быстрый пример воспроизведения проблемы.
<!doctype html>
<html id='html' lang='bg'>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no' />
<link href="https://fonts.googleapis.com/css?family=Montserrat&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
<style>
h1 { font-size: 2em; }
p { font-size: 1.5em; }
.native { font-family: sans-serif; }
.montserrat { font-family: Montserrat, sans-serif; }
.roboto { font-family: Roboto, sans-serif; }
</style>
<title>Sandbox</title>
</head>
<body>
<p>
<button id='set-bg' type='button'>Set BG</button>
<button id='set-ru' type='button'>Set RU</button>
</p>
<p>User agent: <code id='user-agent'></code></p>
<p>Language: <code id='lang'></code></p>
<h1 class='native'>Native</h1>
<p class='native'>Научете повече за всички наши продукти</p>
<p class='native'>Допълващи продукти</p>
<h1 class='montserrat'>Montserrat</h1>
<p class='montserrat'>Научете повече за всички наши продукти</p>
<p class='montserrat'>Допълващи продукти</p>
<h1 class='roboto'>Roboto</h1>
<p class='roboto'>Научете повече за всички наши продукти</p>
<p class='roboto'>Допълващи продукти</p>
<script>
(function () {
'use strict';
function refreshCurrentLang() {
document.getElementById('lang').innerText = document.getElementById('html').getAttribute('lang');
};
function setTogglerHandler(togglerSelector, langValue) {
document.getElementById(togglerSelector).addEventListener('click', function () {
document.getElementById('html').setAttribute('lang', langValue);
refreshCurrentLang();
});
};
document.getElementById('user-agent').innerText = navigator.userAgent;
setTogglerHandler('set-bg', 'bg');
setTogglerHandler('set-ru', 'ru');
refreshCurrentLang();
})();
</script>
</body>
</html>