Question

我的目录结构是

-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');
}

Answer 1

您可以通过添加此字体直接从Google导入字体

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

并与此font-family: 'Roboto', sans-serif;一起使用您可以在https://fonts.google.com/specimen/Roboto?selection.family=Roboto

中找到更多详细信息

Answer 2

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

但是，当roboto-font.css本身已经在./assets/Roboto/Roboto-Thin.ttf内时，roboto-font.css文件正尝试从路径assets/Roboto导入字体文件。您应该从此assets/Roboto属性中删除url()，因为所有字体文件已经与此样式表位于同一目录中。尝试使用url(./Roboto-Thin.ttf)。

也尝试使用适当的网络字体格式，或者按照@Radu的建议从Google导入。

为什么使用@import url（./ assets / Roboto / roboto-font.css）;不行？

2 个答案: