html - 简单字体不变

Question

<p style=" font-family: 'Grinched 2.0'; 
    font-size:50px; 
    margin-left:150px; 
    top:1500px; 
    position: absolute;">Apply now for a position in our team, send us</p>

这是一个非常愚蠢的问题，但严重的是现在已经 3 小时了，我无法解决它!

这是我设置字体的简单 html 代码!当我从计算机访问它时，它运行良好!但是当我通过手机访问网站时，没有应用字体系列属性!其他所有的东西，比如职位，工作正常!错在哪里？

Answer 1

正如@Marc B 所建议的，如果您的手机上没有安装该字体，那么它就不会显示。

要在网络上集成非默认字体，您需要使用@font-face 规则。一旦你用@font-face注册了你的字体，你就可以在你的css中使用它。但是，建议始终保留一些默认字体作为不支持 @font-face 的浏览器的后备，或者如果您的字体出现任何问题。

这是来自 Mozilla Developper Network 的示例

@font-face { // This will register your font
  font-family: "Bitstream Vera Serif Bold";
  src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

p { //Then you can use it like so
    font-family: "Bitstream Vera Serif Bold", serif;
}

---

更新

现在我们可以看到您的网站，我确信问题出在您没有注册 Grinched 2.0 字体这一事实。这解释了为什么当从您的桌面(安装了字体)查看时，任一站点都会显示该字体，但在移动设备上不显示。

如果您按照我上面的示例进行操作，它将起作用。这个小工具可以帮助您准备好字体，并为您提供所需的代码:http://www.fontsquirrel.com/tools/webfont-generator