Question

我想为我的网页提供自定义字体（HP Simplified Light）。我将字体文件上传到Dropbox，我有链接here。但没有任何反应。我把Times New Roman作为字体。我已尝试在本地进行测试，包括本地托管字体和HTML文档，但效果相同。

<html>
<head>
 <style>
    @font-face {
        font-family: HP Simplified;
        src: url('http://dl.dropboxusercontent.com/s/dau4s6y033jkg4y/HPSimplified_Lt.ttf');
    }

    h1 {
        font-family: HP Simplified
    }
 </style>  

 Hello world!
</html>

Answer 1

您的CSS仅使用字体h1样式化HP Simplified个元素。文字“Hello world！”不是h1。你可以这样做：

<h1>Hello world!</h1>

或者您可以使用字体获得CSS样式：

* {
    font-family: HP Simplified
}

Answer 2

这是我在chrome中遇到的错误：

重定向原点＆＃39; http://dl.dropboxusercontent.com＆＃39;已被跨源资源共享策略阻止加载：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; Null＆＃39;因此不允许访问。

下载文件并在本地托管。另外，请务必在文本周围添加标记，并在font-family css的末尾添加;。我做了所有这些，它的工作原理。示例：http://catsarecrits.com/test.html

Answer 3

当我检查你的字体时，它看起来像普通的字体而不是webfont。如果我错了，请纠正我。

另一个可能的原因是Drop box阻止了您在自然位置访问字体文件。

我上传了您的字体并将其转换为不同的webfont格式。

测试链接 http://files.coderinthebox.com/webfont/

zip文件 http://files.coderinthebox.com/webfont/webfontkit-20150531-215129.zip

自定义字体不起作用

3 个答案: