css - 如何从外部css文件导入字体

Question

我正在尝试从 CDN 中存在的外部 css 文件导入字体系列。

文件中定义了一些font-family，我想导入它。我已经试过了，但我无法让它工作。

这是我尝试过的:

@font-face {
    font-family: 'halcom-bold';
    src: url('https://yyyy.net/aso.css');
}

这是外部 CSS 代码:

aso.css

@font-face {
font-family:"halcom";
src:url("https://use.typekit.net/af/657e4d/00000000000000003b9aedc6/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/657e4d/00000000000000003b9aedc6/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/657e4d/00000000000000003b9aedc6/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
font-style:normal;font-weight:700;
}

Answer 1

您不能在 Firefox 中将@font-face 与托管在不同域上的字体一起使用如果你想使用绝对 URL 为 @font-face 指定字体，或者在不同域上托管的字体，它需要使用访问控制 header ，特别是 Access-Control-Allow-Origin header 设置为'* ' 或允许请求字体的域。这也适用于托管在不同子域上的字体。如果您使用的是 Apache，您可以尝试将其放入您的 .htaccess 并重新启动服务器

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>