Question

我正在尝试为我的页面应用font（xxx.woff）。下面是代码。通过使用this link ，我已经应用了字体css Css如下。

@font-face {
    font-family: 'xxx';
    src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAJGG+N4ZgOyNL7RJAKI1J6TtUwuql7QX9RAaoHhg1UdowyYC8YFlAeM0qApRlFoBQwamH0EEr6gl1HWcsYDlCfMhqA4/8gyeXXOkjda0HnKj6AbbCzNWyB7ZlhE2xNDL3PbTd7CZN0seA9DX2wmxn2QH9jGIC92LAPBqM/U/L0G+ADZwQAAAAAAVfa6j8AAA==) format('woff');
    font-weight: normal;
    font-style: normal;

}
* {
        font-family: PB-Regular;
        font-size: 16px;
        color: # !important;
    }

以上代码适用于版本40.0.2214.111 Ubuntu 14.04，Firefox 35.0.1 Ubuntu 14.04。除了这两个版本，它在任何其他浏览器中都不起作用。
请建议我在所有版本的chrome，firefox和IE9

Answer 1

我相信（有人请纠正我，如果我错了）.woff只与选择的浏览器兼容。

在.ttf中添加字体以支持其他浏览器。

Answer 2

定义@font-face规则时，您使用的font-family值的名称是您必须在文档的其余部分中使用的值：

@font-face {
  font-family: 'xxx';
  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAJGG+N4ZgOyNL7RJAKI1J6TtUwuql7QX9RAaoHhg1UdowyYC8YFlAeM0qApRlFoBQwamH0EEr6gl1HWcsYDlCfMhqA4/8gyeXXOkjda0HnKj6AbbCzNWyB7ZlhE2xNDL3PbTd7CZN0seA9DX2wmxn2QH9jGIC92LAPBqM/U/L0G+ADZwQAAAAAAVfa6j8AAA==) format('woff');
  font-weight: normal;
  font-style: normal;
}
* {
  font-family: 'xxx'; /* You must use the value from the @font-face rule */           
  font-size: 16px;
  color: # !important;
}

浏览器中的字体表面兼容性问题

2 个答案: