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

Question

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

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

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

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