Question

我试图为我的网站加载外部字体，但它并没有像我预期的那样工作。我希望文本是粗体的，我加载了粗体版本，但它似乎不起作用。我相信JsFiddle使用外部字体，所以我复制了我的代码并把它放在JsFiddle上，但仍然无法工作。

这是我的jsfiddle

http://jsfiddle.net/noppanit/sr1eL3b0/2/

这是我加载字体的方式。

@font-face {
    font-family:'Andale Mono MT Std Bold', 'Open Sans', 'arial', 'sans-serif';
    src: url(http://www.salon87.nyc/wp-content/themes/salon87/vendor/fonts/AndaleMonoMTStd-Bold.ttf);
    /* use src to point to the location of your custom font could be from your local server folder (like ./fonts/) or a remote location. */
}
section {
    font-family:'Andale Mono MT Std Bold'
}

html有点凌乱，因为我只是从网站上复制了它。不确定我是否错过任何明显的事情。

Answer 1

因为浏览器为字体加载不同的文件，所以我尝试包含所有不同的类型。您最大的问题是font-family需要是字体的标识符。你正在对待它，好像它应该有＆＃34;退回＆＃34;名称，无法完成。

@font-face {
    font-family:'Andale Mono MT Std Bold';
    font-weight:700;
    src: url(FILE_LOCATION.eot) format('embedded-opentype');
    src: url(FILE_LOCATION.eot?#iefix) format('embedded-opentype'),
     url(FILE_LOCATION.woff) format('woff'),
     url(FILE_LOCATION.ttf) format('truetype'),
     url(FILE_LOCATION.svg#levenim) format('svg');
}
section {
    font-family:'Andale Mono MT Std Bold'
}

Answer 2

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

<强> Source

如何加载外部字体以用于我的网站？

2 个答案: