html - 为什么有些浏览器使用错误的字体(显然是随机的)呈现这个 unicode 字符?

标签 html web browser fonts

我正在开发一个网站,需要使用 unicode 符号“S with caron”(0x161)。该网站使用免费的 Palanquin 字体,该字体确实支持该字符 - 然而,某些机器错误地以不同的字体呈现该特定字符。例如:

Example of incorrect renedering

请注意,在错误的示例中,其他字符使用了正确的字体,即使是那些包含不寻常的变音符号的字符。但至关重要的是,没有明显的模式表明哪些机器受到影响。使用 browsershots.org,我发现 Windows 和 Linux 上的 Chrome、Firefox、IE 和 Edge 上都出现了该问题 - 但我也看到了所有这些浏览器上的正确渲染。我还在使用相同版本的同一浏览器的计算机上看到了不同的结果。

我尝试过将字符直接粘贴到 HTML 中以及使用转义码 š,这两种方法都会导致相同的问题。

  • 有人知道导致该问题的原因吗?
  • 如果无法纠正问题,是否有任何合适的解决方法?

最佳答案

如果某个字符在您的网络字体中不可用,浏览器将查看堆栈中的其他字体,并从那里选择一种。您没有发布 CSS,但说它看起来像这样:

字体系列:palanquin、arial、sans-serif;

对于“š”,浏览器将首先尝试 Arial。如果 Arial 存在,包含 š 字符,则会将其呈现为 Arial。如果操作系统未安装 Arial(例如 Linux 或 Android),它将继续使用通用 sans-serif 字体。

这就是事情变得不可靠的地方:现在由浏览器使用它认为可用的任何字体。 OSX 上的 Chrome 很可能会使用与 Windows 10 上的 Chrome 不同的字体。这可能因每个操作系统上的每个浏览器版本而异。浏览器甚至会针对不同的语言使用不同的通用 sans-serif 后备:如果 lang 属性设置为英语,它可能会使用与该语言不同的字体。设置为波兰语。

其中一些字体会有更粗、更小、更细、更宽的字母版本。这就是为什么在第一个屏幕截图中它看起来与 Palanquin 非常接近,但在第二个屏幕截图中后备字体与 Palanquin 根本不匹配。

关于html - 为什么有些浏览器使用错误的字体(显然是随机的)呈现这个 unicode 字符?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48976347/

相关文章:

html - 如何在 Selenium WebDriver 中找到 HTML 子标签的索引?

javascript - 具有自动完成功能的前端开发IDE

javascript - 如何为 Twitter Bootstrap 添加覆盖到视差部分

ios - 如何在 ios 聊天应用程序中使用 Web 套接字?

html - 关于在使用某些第 3 方 css 框架时如何在网页中显示用户输入的 html 的任何想法

javascript - 使用 JavaScript 流式传输文本文件

web-services - 可以使用浏览器发送 PUT 或 DELETE HTTP 请求吗?

JavaScript : How to get the window width and height?

Javascript 强制更改出现在页面完全加载之前

mysql - 在Golang中从MySql读取Json数据?