gpt4 book ai didi

html - 字体在 Safari 中加载正常,但在 Chrome 或 Firefox 中无法加载(全部在 Mac 上)

转载 作者:行者123 更新时间:2023-11-28 10:58:42 27 4
gpt4 key购买 nike

OK,我已经到了拔头发的阶段了。

我创建了以下简单示例。基本上 Safari 都能正确显示这两种字体,但 Chrome 和 Firefox 都不会显示 Helvetica 字体。两种字体与此测试 HTML 位于同一个文件夹中。有人有什么想法吗? - 我试过两种来源的 Helvetica Heavy Condensed,效果相同。查看图片。

<head>
<style>
@font-face
{
font-family: "HelvHvCn";
src: url('HelvHvCn.ttf') format('truetype');
}
@font-face
{
font-family: "BebasNeue";
src: url('BebasNeue-webfont.ttf') format('truetype');
}
h1
{
font-family: HelvHvCn;
}
h2
{
font-family: BebasNeue;
}
</style>
</head>
<body>
<h1>This font only works in Safari</h1>
<h2>This font works in Safari, Chrome and Firefox</h2>
</body>

最佳答案

Webfont 实现有点古怪,因此您需要使用精心措辞的@font-face 声明来让它在 xbrowser 中可靠地呈现。

如果您拥有将其用作网络字体的许可,请通过 http://www.fontsquirrel.com/ 等服务运行 TTF生成 eot、woff 和 svg 网络字体,然后在您的 CSS 中尝试此语法...

@font-face {
font-family: 'your-custom-font';
src: url('your-custom-font.eot');
src: url('your-custom-font.eot?#iefix') format('embedded-opentype'),
url('your-custom-font.woff') format('woff'),
url('your-custom-font.ttf') format('truetype'),
url('your-custom-font.svg#your-custom-font') format('svg');
}

body {
font-family: 'your-custom-font', sans-serif;
}

可能还值得注意的是,woff 文件有时在 Mac Chrome 上看起来不错,而在 Win Chrome 上看起来很糟糕。你可能想乱用 -webkit-font-smoothing: antialiased; 并且在某些边缘情况下调整字体顺序,甚至完全放弃 woff。

关于html - 字体在 Safari 中加载正常,但在 Chrome 或 Firefox 中无法加载(全部在 Mac 上),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22539172/

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