Chrome为什么不为按钮呈现字体系列？

Question

我有以下JSFiddle。在Chrome浏览器中，即使开发人员工具下的CSS显示font-family: system-ui，按钮仍呈现为font-family: 'Gaegu', cursive。 Firefox不会发生此问题。

Chrome 67.0.3396.99

Firefox 61.0.1

Answer 1

实际上，这很奇怪，因为当我打开您的fiddle链接时，我看到了：

我的系统是Ubuntu 18.4，我的Google chrome是Version 67.0.3396.99 (Official Build) (64-bit)，但是我认为系统不是您的问题，可能是您的字体版本与您的Google Chrome不兼容。但我有一个更好的版本，可以与所有浏览器兼容。

忘记浏览器和系统，必须使用字体嵌入，我的意思是@font-face。因为在您的小提琴代码中我没有看到这个。按照以下结构，将字体嵌入到您的项目中，并使您的项目与系统和浏览器独立。

1. 下载所有类型的最新字体
2. 将它们放置到一致的文件夹中
3. 使用@font-face在项目中声明嵌入字体

请参见以下代码：

@font-face {
   font-family: 'gaegu_mine';
   src: url('./font/Gaegu.eot');
   src: url('./font/Gaegu.woff') format('woff'),
   url('./font/Gaegu.ttf') format('truetype'),
   url('./font/Gaegu.eot?#iefix') format('embedded-opentype');
   font-weight: normal;
   font-style: normal;
}

然后通常使用如下字体：

.some-class {
    font: normal 15px/20px 'gaegu_mine';
}

希望它会为您提供帮助。

Answer 2

@Kaiido在评论中回答说，这似乎是Mac OS X的Chrome 67上的一个错误。如果我将-webkit-appearance: none;添加到input.button-text CSS选择器中，问题就解决了。 / p>