Question

我想使用其他网站的字体网址，是否有可能？

@font-face {
    font-family: 'font';
    src: url('http://example.com/font.eot?#') format('eot'),    
         url('http://example.com/font.woff') format('woff'),     
         url('http://example.com/font.ttf') format('truetype');  
    font-weight: normal;
    font-style: normal;
}

我试过了，但它没有用！

Answer 1

不，您无法从其他网址导入字体文件，因为它violates cross origin specs。您必须将css文件放在该域（http://example.com/fonts.css）上的同一目录中：

/*fonts.css*/

@font-face {
    font-family: 'font';
    src: url('font.eot?#') format('eot'),    
         url('font.woff') format('woff'),     
         url('font.ttf') format('truetype');  
    font-weight: normal;
    font-style: normal;
}

然后在样式表中导入它：

@import url("http://example.com/fonts.css");

或者，在文档<head>中链接到它：

<link rel="stylesheet" href="http://example.com/fonts.css">

Answer 2

如果相应的配置已禁用CORS，则您无法从其他服务器导入任何脚本或字体。

仅如果您有权访问另一台服务器，则可以通过以下方式启用它：

# Microsoft IIS in web.config
<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" />
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

# Apache config
# The code can be placed with the `.htaccess` file or `httpd.conf` file:
<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

这将设置 Access-Control-Allow-Origin CORS 配置以允许从所有域中提取。如果要仅为特定域提供字体，请使用逗号列出特定域。在浏览器喜欢一种类型的情况下，您需要适当地提供所有字体类型。

进一步阅读：Serving Fonts from CDN

CSS - 我可以像这样使用@ font-face：

2 个答案: