文章/答案/技术大牛

发布

社区首页 >问答首页 >@字体-face不工作。我是不是遗漏了什么？

问@字体-face不工作。我是不是遗漏了什么？
EN

Stack Overflow用户

提问于 2021-12-05 12:09:03

回答 2查看 112关注 0票数 1

我有一个项目目录：

.
├──fonts/
│  └──Roboto-Regular.ttf
├──images/
│  ├──final_goal.png
│  └──logo.png
├──scripts/
│  └──script.js
├──sites/
├──styles/
│  ├──style.css
│  ├──style.css.map
│  └──style.scss
├──code.sh
├──index.html
└──watch.sh

我的CSS文件在index.html文件中引用。我尝试使用以下CSS为Roboto常规字体制作字体：

@font-face {
    font-family: GoogleRob;
    src:     url(/fonts/Roboto-Regular.ttf) format('truetype');
}

我稍后会参考以下内容：

* {
    color: white;
    font-family: GoogleRob, monospace; /* here */
    font-size: small;
    padding: 0;
}

但它不起作用。我是不是在语法上遗漏了什么？我试过使用不同的引号和文件打印约定，但它不起作用。

请帮帮忙

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-12-05 13:13:51

您的style.css文件位于styles文件夹中，在fonts文件夹旁边，但在url()中，您没有正确地定位它。你应该这样写：

src: url('../fonts/Roboto-Regular.ttf') format("truetype");

将../从当前文件夹( styles文件夹)提升一级，然后进入fonts文件夹。

票数 2

Stack Overflow用户

发布于 2021-12-05 12:47:13

.ttf字体文件在Google上不起多大作用。相反，始终使用woff和woff2。通常，建议同时使用.woff和.woff2。使用Woff2作为主字体，使用Woff作为备用字体，这将确保浏览器始终使用最佳字体。

CSS语法

@font-face {
  font-family: myWoffFont;
  src: url(fonttemplate.woff2);
}
@font-face {
  font-family: myWoffFont2;
  src: url(fonttemplate2.woff);
}

HTML

div {
  font-family: fonttemplate, fonttemplate2;
}

TTF对于一些较旧的浏览器是有用的。WOFF压缩文件并为所有现代浏览器所支持。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70234124

复制

相似问题

问@字体-face不工作。我是不是遗漏了什么？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@字体-face不工作。我是不是遗漏了什么？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@字体-face不工作。我是不是遗漏了什么？
EN