Monospace CSS 在 Android 版 Chrome 中不起作用答案

【问题标题】：Monospace CSS not working in Chrome for AndroidMonospace CSS 在 Android 版 Chrome 中不起作用
【发布时间】：2013-10-01 16:34:23
【问题描述】：

我正在尝试在我的个人网站上以等宽方式呈现代码。以下 CSS 样式适用于桌面浏览器（和适用于 Android 的 Firefox）没有问题，但适用于适用于 Android 的 Chrome：

.code {
    font-family:Consolas,"Courier New","Liberation Mono",monospace;
    background-color:#F0F0F0;
}

添加 Droid Sans Mono 没有帮助：

.code {
    font-family:"Droid Sans Mono",Consolas,"Courier New","Liberation Mono",monospace;
    background-color:#F0F0F0;
}

只需使用font-family:monospace 即可在适用于 Android 的 Chrome 上正常工作，但这样做会导致我无法在桌面操作系统上使用特定字体。

如何让代码在 Android 上以等宽字体显示而不会失去在其他平台上使用特定字体的能力？我不想使用this question的答案建议的自定义字体，我只想使用系统提供的等宽字体。

供参考，样式文件为here。

【问题讨论】：

标签： android css google-chrome fonts

【解决方案1】：

Chrome 无法通过指定名称来访问 Droid Sans Mono，等宽字体已直接映射到 Droid Sans Mono 字体。

【讨论】：

【解决方案2】：

它现在在更新到 Chrome 30 后可以工作。毕竟看起来像一个浏览器错误......

【讨论】：

在 2018 年不适合我：codepen.io/anon/pen/pxRzwY 这是它在 Android（Firefox 和 Chrome）上的截图：i.imgur.com/pgB3HEi.jpg
为了将来参考，请注意some gliphs are missing in Google fonts。我的解决方法是使用 Adobe 的 Source Code Pro，它包含所有字符（包括我需要的方框图）。 Mononoki 也应该可以工作。

【解决方案3】：

可以在网络浏览器设置中修改默认等宽字体。它还取决于所使用的操作系统。为确保结果一致，您需要加载自己的字体。

worked 对我来说是：

@import url('https://fontlibrary.org/face/dejavu-sans-mono');

.monospace {
  font-family: 'Dejavu Sans Mono', monospace;
  font-variant-numeric: tabular-nums lining-nums;
  font-kerning:none;
}

【讨论】：