Safari的HTML输入字体系列样式

Question

我有一些CSS用于表中的文本输入。

input.login-form__username {
-webkit-appearance: none;
font-family: "Poppins-Regular";
width: 20vw;
}

由于某些原因，font-family在macOS上的Safari中无法正常工作。它仍然以苹果操作系统的字体显示输入框。这在Chrome和其他浏览器中确实可以正常工作，但Safari除外。

我是不是错过了能让它发挥作用的东西？

Answer 1

你应该看到这个链接，有些字体在safari上不起作用，就像你说的那样，为了解决这个问题，你可以添加另一个在safari中起作用的相同字体，这样做：

code {
font-family: "Times New Roman", Georgia, serif;
}

如果使用了多个姓氏，浏览器将选择第一个使用@font face嵌入页面或安装在用户操作系统上的姓氏。

Answer 2

Safari应该能够获取TTF文件，无论版本如何。

@font-face {
font-family: 'MyFontFamily';
src: url("fonts/Poppins-Regular.woff") format('woff'), 
url("fonts/Poppins-Regular.ttf")  format('truetype');
}