是否可以使用特定于浏览器的字体?

Posted

技术标签:

【中文标题】是否可以使用特定于浏览器的字体?【英文标题】:Is it possible to have browser specific fonts? 【发布时间】:2020-02-20 21:57:35 【问题描述】:

我有一个使用流沙字体的网络应用程序。在 Chrome 浏览器中看起来不错,但在 Firefox 和 Microsoft Edge 中,对于任何边缘较细的字符(如 D、P、R 或 T)看起来都不是很好。

Example with capitalized D Firefox

Example with capitalized D Chrome

所以我想知道拥有浏览器特定字体而不是每个浏览器拥有单独的 CSS 文件的最佳方式。除非我误解了某些东西,而这实际上是最好的方法。

【问题讨论】:

【参考方案1】:

首先,您需要了解您的浏览器上下文(您可以自己完成或选择一个包,具体取决于代理报告需要的详细程度)。那么:

组件方法

如果您在 JS 库(styledComponents、JSS、...)中使用 CSS,这非常容易。您只需要查询您的浏览器上下文并在您的应用程序周围有一个包装器元素,它将使用某种通用选择器(如*)设置正确的字体。

VanillaJS 方法

将每种字体都放在一个样式表中(可能是全局样式表或专门针对字体的样式表),并根据您的上下文更改<body /> 的类。

【讨论】:

以上是关于是否可以使用特定于浏览器的字体?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用特定于浏览器的 vanilla JS 库对依赖项做出反应

非技术人员可以使用 Github 的 Electron 在 Mac 上构建特定于站点的浏览器的最简单方法是啥?

在 Xcode 8.2 中设置特定于设备的字体

谷歌浏览器检查元素 - 无效的属性名称 - 特定于浏览器?

特定于浏览器的 CSS 样式

php Php - 在检测到浏览器时加载特定于浏览器的样式表。