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

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

fonts css

Jacques Amsel · 技术社区 · 6 年前

我的目录结构是

-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 回复 | 直到 6 年前

Radu 6 年前

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

   @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 6 年前

当使用以 ./ 这意味着路径应该从当前目录开始。如果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导入。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前