Question

我在我的css中使用以下代码：

@font-face {
    font-family: "rsfont";
    src: url("rsfont.ttf");
}

body {
    font-family: 'rsfont';
}

我的css文件位于同一文件夹中的rsfont.ttf文件，但它不起作用。为什么呢？

Answer 1

.ttf字体适用于Safari，Android，iOS。要使字体适用于所有浏览器，您需要使用字体生成器制作更多字体格式。您可以使用fontsquirrel

上的那个

你的最终@fontface声明应该是这样的，可以在支持@fontface的所有浏览器中使用

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

Answer 2

您需要指定格式，并且对于完整的跨浏览器支持，您应该添加woff和eot。以下代码将支持所有浏览器（只要您拥有正确的字体文件）

对于所有现代浏览器，您实际上只需要一个eot和woof文件。

＆＃13;

@font-face{
 font-family:rsfont;
 src:url(rsfont.eot);
 src:url(rsfont.eot) format("embedded-opentype"),
     url(rsfont.woff) format("woff"),
     url(rsfont.ttf) format("truetype")
 font-weight:400;
 font-style:normal
}

＆＃13;

Answer 3

您可以尝试将其更改为以下

@font-face {
    font-family: "rsfont";
    src: url('rsfont.ttf') format('truetype');
}

但是，并非所有浏览器都支持相同的文件类型！您需要使用FontSquirrel之类的内容将其转换为多个文件。您可以在此处查看兼容性矩阵：https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

自定义字体声明不起作用

3 个答案: