不显示您通过@ font-face添加的字体

Question

看了类似的问题而未找到答案。 Chrome浏览器ver.52。 添加到网站字体。在基本css文件中添加了我的结构代码：

../src/
├── apps
├── base
├── common
│   ├── font
│   │   └── open-sans
│   │       └── font.ttf
│   │       └── font.eot
│   │       └── font.woff
│   ├── static
│   │   └── css
│   │       └── base.css
│   ├── templates
│   └── views

@ font-face variant，我用过

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

@font-face {
  font-family: 'open_sansbold';
  src: url('/common/font/open-sans/OpenSans-Bold-webfont.eot');
  src: url('/common/font/open-sans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('/common/font/open-sans/OpenSans-Bold-webfont.woff') format('woff'), url('/common/font/open-sans/OpenSans-Bold-webfont.ttf') format('truetype'), url('/common/font/open-sans/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
  font-weight: normal;
  font-style: normal;
}

但该字体未应用于该元素：

.element__symbol {
  position: absolute;
  left: 10px;
  font: bold 15pt open_sansbold;
}

检查页面时提供open_sansbold，但使用serif字体。控制台没有错误

Answer 1

字体的路径可能不正确。 Chrome在控制台窗口中显示2个错误。你能发布控制台错误吗？

Answer 2

这可能不是您正在寻找的正确答案，但如果您只是想加载Open Sans Bold，请使用谷歌字体。

这是一个html代码段，允许您加载字体。

<link href="https://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet">

这是一个css片段，允许您加载字体。

@import 'https://fonts.googleapis.com/css?family=Open+Sans:700';

然后用你的CSS，试试这个;

.element__symbol {
    position: absolute;
    left: 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 15pt;
}

Google字体是一种非常可靠的字体加载方式，我建议尽可能使用它。