Question

嗨，我知道有一些关于此事的话题，但请放心，我一直在寻找这些主题的解决方案，但我找不到任何解决方案。

我尽了最大努力，但仍然没有得到解决。

所以这是我的CSS字体：

@font-face {
    font-family: 'quicksandregular';
    src: url('font/quiksand2/quicksand-regular-webfont.eot');
    src: url('font/quiksand2/quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/quiksand2/quicksand-regular-webfont.woff2') format('woff2'),
         url('font/quiksand2/quicksand-regular-webfont.woff') format('woff'),
         url('font/quiksand2/quicksand-regular-webfont.ttf') format('truetype'),
         url('font/quiksand2/quicksand-regular-webfont.svg#quicksandregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

这是身体css

body {
    font-size: 12px;
    padding: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: #f7f2e2;
    font-family: Quicksand;
    letter-spacing: -1px;
    overflow: auto;
    position: absolute;
}

某种程度上，该字体仍然没有显示在我的网站中。当我在我的电脑上安装了Quicksand字体时，它确实出现了，但是一旦我删除了流沙字体，字体就会切换成默认的衬线字体。这不是我真正想要的，因为我希望其他PC能够显示我使用的字体，这是流沙。

我确实在我的根文件夹中检查了字体文件夹是完全一样的。根据我的理解，应该显示流沙字体。

问题是，我的错误是什么？如果有人回复我并在最多1天内回复，我会很高兴。

Answer 1

Everthing很好但你需要更改是应用的css

这是身体css

body {
font-size: 12px;
padding: 0;
height: 100%;
width: 100%;
margin:0;
background-color: #f7f2e2;
font-family: quicksandregular;
letter-spacing: -1px;
overflow:auto;
position:absolute;
}

Answer 2

只需对您的代码进行以下更改即可。

font-family: quicksandregular;

Answer 3

你必须把＆＃39;＆＃39;和你的字体。因为这是在css中生成它的方式。

示例：

font-family: 'quicksandregular';

希望这有效。

Answer 4

在@font-face内，您已将font-family属性声明为quicksandregular。因此，您必须在CSS代码中使用font-family: 'quicksandregular'或font-family: quicksandregular。

另外，一件好事是将@font-face重命名为 QuickSand ，并使多个QuickSand字体具有不同的font-weight属性，因为这将允许你在这样的结构中使用它：

.myRegularText {
  font-family: 'QuickSand';
  font-weight: regular;
}
.myBoldText {
  font-family: 'QuickSand';
  font-weight: bold;
}

我无法知道天气是否存在文件路径问题，因为我无法看到服务器目录的结构，但我们假设以下结构：

<root> /
  style/
    main.css
  font/
    quicksand2/
      <font-files>

在这种情况下，您必须使用

@font-face {
  font-family: 'QuickSand';
  src: url('/font/quicksand2/<file-name>');
  // ..
}

或

@font-face {
  // ...
  src: url('../font/<file-name>');
  // ...
}

希望有所帮助。

无论我做了什么改变，CSS字体都不起作用

4 个答案: