Question

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

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

由于某些原因，font-family在macOS的Safari中无法正常工作。它仍然以Apple的OS字体显示输入框。在Chrome和其他浏览器中，它确实可以正常工作，但在Safari中不能。

我错过了可以使它正常工作的东西吗？

Answer 1

您应该看到此link，某些字体无法像您所说的那样在safari中工作，要解决该问题，您可以添加另一种在safari上工作的相等字体，如下所示：

$filename = preg_replace('/[^A-Za-z0-9\-_.]/', '-', $filename);

如果使用多个姓氏，浏览器将选择使用@ 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');
}

Safari的HTML输入字体系列样式

2 个答案: