在保加利亚语中使用蒙特塞拉特时，西里尔字母显示错误答案

【问题标题】：Cyrillic characters displayed wrongly when using Montserrat in Bulgarian在保加利亚语中使用蒙特塞拉特时，西里尔字母显示错误
【发布时间】：2019-06-30 13:46:24
【问题描述】：

使用 Google Fonts 中的 Montserrat 字体并将 HTML 语言设置为保加利亚语时，某些字符在某些浏览器中显示错误。

当使用其他字体（例如Roboto）或保留浏览器的原生字体时，文本会正确显示。

当设置另一种西里尔语言（例如俄语）时，字符也会正确显示。

蒙特塞拉特声称支持西里尔字母和扩展西里尔字母。

我们没有在本地安装蒙特塞拉特的副本。

使用扩展语法 (<link href="https://fonts.googleapis.com/css?family=Montserrat&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">) 包含字体没有任何区别。

发生了什么事？

由于客户和 CMS 的原因，我们无法轻易更改字体或语言。

使用保加利亚语，蒙特塞拉特的字符显示不正确：

使用俄语，字符在任何地方都能正确显示：

我们进行了以下测试：

Windows 10 Enterprise 17134.556 上的 Chrome 71.0.3578.98：有问题
Windows 10 Pro 17134.523 上的 Firefox 64.0.2：有问题
Windows 10 Enterprise 17134.556 上的 Internet Explorer 11.523.17134.0：没有问题
Windows 10 Enterprise 17134.556 上的 Edge 42.17134.1.0：没有问题
MacOS 10.13.6 上的 Chrome 71.0.3578.98：没有问题

您可以在下面找到重现问题的快速示例。

<!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&amp;subset=cyrillic,cyrillic-ext,latin-ext,vietnamese" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto&amp;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>

【问题讨论】：

标签： html localization webfonts

【解决方案1】：

这并没有错。保加利亚最近（20 世纪末）开发了自己的西里尔字母版本，并且它正慢慢开始成为标准，首先是谷歌字体，现在也是苹果（iOS 13 系统字体中的保加利亚文本看起来像这样）。它看起来很不寻常，并且对于其他西里尔字母用户来说颇具争议，但保加利亚人已经对这些字母非常熟悉。 https://bg.m.wikipedia.org/wiki/Българска_кирилица

【讨论】：

【解决方案2】：

您可以使用以下命令强制浏览器使用标准西里尔字符形：

*
{
  -webkit-font-feature-settings: "locl" 0;
  -moz-font-feature-settings:    "locl" 0;
  -ms-font-feature-settings:     "locl" 0;
  font-feature-settings:         "locl" 0;
}

【讨论】：