1

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

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

是不允许网络字体的设备还是我的目的？

这是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/用于顶部导航。

4

1 回答 1

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

于 2013-09-03T12:35:44.943 回答