Question

我正在尝试使用@ font-face加载两种字体，但是遇到各种奇怪的问题。某些浏览器将加载字体，而其他浏览器则不会。台式机上的相同浏览器无法加载，但移动设备上可以加载。我不知道我的代码，文件结构或什么地方有问题（我使用fontsquirrel的生成器作为标准字体，但没有使用其他字体）。

我的@ font-face代码是：

@font-face {
    font-family: 'sdregular';
    src: url('sd-regular-webfont.woff') format('woff');
}
@font-face {
    font-family: 'BoereTudor';
    src: url('BOERT___0.ttf') format('truetype');
}

我的CSS样式代码是：

.c9 {font-family: 'sdregular';}
.c7 {font-family: 'BoereTudor'; font-size: 1.5em;}

这是页面链接：https://universaltheosophy.com/hpb/voiceofthesilence.html

我的样式表和字体位于文件夹https://universaltheosophy.com/resources/

中

css文件utfonts.css使用@ font-face调用字体。 css文件utstyle.css包含两个类（.c7和.c9）的字体系列设置

.c7用于文本“专用于少数”； .c9用于位于以下位置的符号：https://universaltheosophy.com/hpb/voiceofthesilence.html#sdfootnote41sym

我尝试在Firefox（台式机和移动设备），Chrome（台式机和移动设备）和DuckDuckGo的移动浏览器中进行测试，结果完全不一致。

任何帮助将不胜感激！

Answer 1

好的，找到了解决方案，它与我的代码无关。我的网站是wordpress网站，但我要添加这几个与wordpress分开的html文件。从这些html文件加载字体文件的尝试导致了“ Access-Control-Allow-Origin（CORS起源）”错误。解决方案是将这小段代码添加到wordpress .htaccess文件中：

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

解决方案来自这里：https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/

为什么我的字体没有使用@ font-face跨所有浏览器加载？

1 个答案: