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

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

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

   @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

当您使用以./开头的路径时，这意味着该路径应从当前目录开始。如果您的主.css文件位于应用程序文件夹中，它将正确导入 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导入。