Question

我的CSS中有一个自定义字体。它在本地页面上有效，但在将网站发布到服务器上时无效。这是我的CSS：

 @font-face{ 
font-family: 'Font-Example';
src: url('example.eot');
src: url('example.eot?#iefix') format('embedded-opentype'),
     url('example.woff') format('woff'),
     url('example.ttf') format('truetype'),
     url('example.svg#webfont') format('svg');
 }
 #kay { font-family: 'Font-Example', Arial;
    font-weight: normal;
    font-size: 18px;}

和我的html：

 <span id="kay">Font Example</span>

我尝试在多个浏览器中打开已发布的网站，但都无法正常工作。我是否缺少某些东西，还是无论如何都不受支持？

Answer 1

如果字体在本地工作，但在服务器上不工作，则需要检查字体文件的路径。检查页面，检查它告诉您的位置路径，将其与ACTUAL位置路径进行比较，您应该会发现问题！

Answer 2

要将所选字体嵌入到网页中，请查看以下示例html代码。此外，如果您要导入编号。好的字体，那么我建议使用https://fonts.google.com

<!DOCTYPE html>
<html>
<head>
<style> 
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Fascinate+Inline');

#kay {
    font-family: 'Fascinate Inline', cursive;
    font-size:26pt;
}
</style>
</head>
<body>
<p style="font-family: 'Raleway', serif;">Write Your Beautiful Texts Here</p>


<span id="kay">Your Font Example</span>
</body>
</html>

如果您仍然需要一些指导，请阅读这篇有用的文章 https://developers.google.com/fonts/docs/getting_started

Answer 3

看看您的代码，我可以想到两个选择：

根据CSS代码，文件example.eot，example.woff，example.ttf和example.svg应该位于CSS文件的同一目录中，而不是HTML目录中。
如果您使用的是IIS，则必须配置web.config文件。

web.config文件的代码必须放入staticContent标记中。

一个例子：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject"/>
            <mimeMap fileExtension=".woff" mimeType="application/font-woff"/>
            <mimeMap fileExtension=".ttf" mimeType="application/x-font-truetype"/>
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
            <mimeMap fileExtension=".otf" mimeType="application/x-font-opentype"/>
        </staticContent>
    </system.webServer>
</configuration>

自定义字体（字体）发布后不起作用

3 个答案: