css HTML中的Google Font不在Safari上渲染

3htmauhk 于 2023-06-25 发布在 Go

关注(0)|答案(1)|浏览(99)

我正在尝试创建一个非常基本的HTML电子邮件签名。我希望所有的文字显示在开放的Sans字体，我通过谷歌字体导入。
在Chrome上，它完全按照我想要的方式显示：click here for image
然而，在Safari和我的iOS移动终端上，Open Sans无法通过：click here for image
下面是我的代码：

<!doctype html>
<head>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
</style>
</head>

<table style=" 
            background-color: #000000;
            font-family: 'Open Sans' !important;
            font-weight: 400;
            font-style: normal;
            text-align: left;
            color: #ffffff;
            font-size: 14px;
            line-height: 21px;
            padding: 10px 40px;
            border-spacing: 0;">
<tbody>
<!-- in here i make the table as shown in the images above -->
</tbody>
</table>

我想问题出在头/表样式代码上。
我试过@import（如上所述），也试过在Google Font中拉入，我甚至试过在本地嵌入字体作为Woff和Woff 2字体。
我是一个HTML新手，所以原谅我，如果我在这里是愚蠢的，但我已经在互联网上搜索了几个小时，我已经尝试了没有解决这个问题。

css

来源：https://stackoverflow.com/questions/76532168/google-font-in-html-isnt-rendering-on-safari

1条答案

按热度按时间

k2fxgqgv1#

我建议你使用一个完整的字体导入所有的权重和样式，这样Safari就可以用不同的字体权重正确地渲染它。我也遇到过一次。使用这个import语句，它应该是固定的：

<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
</style>

赞(0）回复(0）举报 2023-06-25

我来回答

css HTML中的Google Font不在Safari上渲染

1条答案

相关问题

热门标签

最新问答