css - 如何正确使用网页字体？

Question

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

它可以在我的电脑上运行，但那是因为我有字体。我将它上传到一个免费的转换网站，这使它们成为我的 .SVG 和 .OET 等，但当我从我的 nexus 上的 chrome 或我的 iphone 上的 chrome 查看它时，它似乎仍然无法正确呈现。

是设备不允许 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