Question

我正在尝试配置要从我的网站使用的网络字体。

它适用于我的电脑，但那是因为我有字体。我将它上传到其中一个免费转换网站，这些网站为我制作了.SVG和.OET等，但是当我从我的nexus上的chrome或我的iphone上的chrome中查看它时，它似乎仍然无法正确呈现。 / p>

它是不允许使用webfonts的设备还是我的结束？

这是CSS代码

.navig {
font-family: 'TrajanPro-Bold';
src: url('http://www.theroyaloaknonington.co.uk/fonts/TrajanPro-Bold.eot');
src: local('TrajanPro-Bold'), url('http://www.theroyaloaknonington.co.uk/fonts/TrajanPro-Bold.woff') format('woff'), url('http://www.theroyaloaknonington.co.uk/fonts/TrajanPro-Bold.ttf') format('truetype'), url('http://www.theroyaloaknonington.co.uk/fonts/TrajanPro-Bold.svg') format('svg');
text-align:center;
font-size:14px;
color:#333333;
font-weight:bold;

我试图点击的网页是http://www.theroyaloaknonington.co.uk/beta/，用于导航顶部。

Answer 1

首先，您需要声明@ font-face：

@font-face {
  font-family: 'TrajanPro-Bold';
  src: url('fonts/TrajanPro-Bold.eot');
  src: url('fonts/TrajanPro-Bold.eot?#iefix') format('embedded-opentype'),
       url('fonts/TrajanPro-Bold.woff') format('woff'),
       url('fonts/TrajanPro-Bold.ttf') format('truetype'),
       url('fonts/TrajanPro-Bold.svg#TrajanProBold') format('svg');
  font-weight: normal;
  font-style: normal; }

然后您可以在CSS中的任何位置使用该字体，如下所示：

.navig { font-family: 'TrajanPro-Bold'; }

显然，在CSS的font-face位中，您需要所有这些格式，并且需要将src路径更改为字体所在的位置。

如果您在Font Squirrel上使用字体生成器，请为您生成CSS以及正确的文件类型：http://www.fontsquirrel.com/tools/webfont-generator

如何正确使用webfonts？

1 个答案: