代码之家 › 专栏 › 技术社区 › Jacques Amsel

为什么使用@import url(./assets/roboto/roboto font.css);不起作用?

fonts css

Jacques Amsel · 技术社区 · 7 年前

我的目录结构是

-app
-main.css
  -assets
     -Roboto
        -roboto-font.css
        -Roboto font files...

但当我使用 @import url("./assets/Roboto/roboto-font.css"); 在我的 main.css 文件,但字体不适用于任何元素。这是 roboto-font.css

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100;
    src: url(./Roboto-Thin.ttf) format('tff');
}

2 回复 | 直到 7 年前

Radu 7 年前

你可以通过添加这个直接从谷歌导入字体

   @import url('https://fonts.googleapis.com/css?family=Roboto');

和这个一起使用 font-family: 'Roboto', sans-serif; 你可以在这里找到更多的细节 https://fonts.google.com/specimen/Roboto?selection.family=Roboto

Guilherme Vieira 7 年前

当使用以 ./ 这意味着路径应该从当前目录开始。如果main.css文件在app文件夹中,它将正确导入roboto-font.css文件。

但是,roboto-font.css文件正在尝试从路径导入字体文件。 ./assets/Roboto/Roboto-Thin.ttf 虽然roboto-font.css本身已经在里面了 assets/Roboto . 你应该移除 资产/机器人 由此 url() 属性,因为所有字体文件都与此样式表位于同一目录中。试用使用 url(./Roboto-Thin.ttf) .

还可以尝试使用适当的Web字体格式,或者按照@radu的建议从Google导入。

推荐文章

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前