gpt4 book ai didi

css - 在 safari 上使用自定义字体的字母间距 Css?

转载 作者:太空宇宙 更新时间:2023-11-04 14:18:58 33 4
gpt4 key购买 nike

我正在开发一个网站,我刚刚意识到我的字体渲染仅在 Safari 上存在问题,而且我没有找到解决方案。

基本上我在我的网站上使用了两种自定义字体。一个有 0.05em 的字母间距以尊重我的 psd 文件。

我的字体在 Chrome、Firefox、Internet Explorer 上呈现良好。但是对于 Safari,奇怪的是,它不起作用,字母间距不呈现。我在某处读到它可能是 webkit 的问题,但如果是这样,为什么它会在 chrome 上工作?这真的让网站在 safari 上变得很糟糕,我需要找到一个修复方法。

我不敢相信没有可能解决这个问题。

如果您有任何想法,我们将不胜感激。

下面是我的代码。

声明字体的CSS:

@font-face {
font-family: 'univers_lt_std_59_ultracnRg';
src: url('fonts/univers-lt-std-59-ultra-condensed-webfont.eot');
src: url('fonts/univers-lt-std-59-ultra-condensed-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/univers-lt-std-59-ultra-condensed-webfont.woff') format('woff'),
url('fonts/univers-lt-std-59-ultra-condensed-webfont.ttf') format('truetype'),
url('fonts/univers-lt-std-59-ultra-condensed-webfont.svg#univers_lt_std_59_ultracnRg') format('svg');
}

我段落的CSS:

color: #57585a;
font-family: 'univers_lt_std_59_ultracnRg';
letter-spacing: 0.05em;
font-size: 19.58px;
text-transform: uppercase;
-webkit-font-kerning: initial;
line-height: 26.47px;

在 Chrome Firefox 和 Internet Explorer 上呈现

enter image description here

在 Safari 上呈现

enter image description here

显然字母间距不起作用..

如果您有任何想法,再次感谢。

最佳答案

尝试使用像素而不是字母间距的相对值。此外,对字体大小和行高使用整数。众所周知,Safari 的舍入方式不同。

关于css - 在 safari 上使用自定义字体的字母间距 Css?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20083821/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com