为什么使用@import url(./assets/Roboto/roboto-font.css)；不起作用？

Question

我的目录结构是

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

但是当我在main.css文件中使用@import url("./assets/Roboto/roboto-font.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');

您可以在此处https://fonts.google.com/specimen/Roboto?selection.family=Roboto找到更多详细信息，并与此font-family: 'Roboto', sans-serif;一起使用

Answer 2

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

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

也可以尝试使用合适的网页字体格式，或者像@Radu建议的那样直接从Google导入。