Question

@font-face{
    font-family:'Poppins-Light';
    src:url(http://mdinfosystems.co.in/demo/mdnew/fonts/Poppins-Light.ttf) 
    format('truetype');
}

尝试使用域名网址调用此字体，但它不起作用和位置绝对完美，即使将此网址粘贴到您的浏览器，它也会自动为您提供字体文件。但我不明白为什么它不适用于我的网站。我搜索了谷歌搜索到的这个我发现在我的网站上添加了一些代码，但我不明白我必须在服务器或html文件的CSS中添加这些代码，在下面我已经提到了我找到的代码在谷歌搜索：

"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>"

Answer 1

您需要先使用此服务将此字体转换为网络字体：

https://transfonter.org/

我用你的字体做了：

https://transfonter.org/files/eafb2ae175df7972c13c5ea3565a2129/demo.html?1504251859

然后你需要在某处托管字体文件，最终产品生成的css应如下所示：

@font-face {
font-family: 'Poppins';
src: url('Poppins-Light.eot');
src: url('Poppins-Light.eot?#iefix') format('embedded-opentype'),
    url('Poppins-Light.woff') format('woff'),
    url('Poppins-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;

}

他们将为您提供所需的所有代码和字体文件。

如何使用域url而不是本地路径调用font-face

1 个答案: