css - 在我的 CSS 中使用 Lato 字体 (@font-face)

Question

我正在尝试获取这些字体并将它们添加到我的 css 中:

lato bold italic 24,
lato regular 14,
lato bold 14,
lato light 14,
lato light italic 16

我在这个网站上找到了这些字体:http://www.fontsquirrel.com/fonts/lato

我下载了。那里有一些文件 (ttf)，并将其添加到我的 mvc 元素中的文件夹 fonts。

我想要定义的能力:

<div style="font-family: lato-bold italic; font-size: 24px;">lato bold italic font</div>
<div style="font-family: lato-regular; font-size: 14px;">lato regular font</div>

所以我读到我必须做类似的事情:

@font-face { 
    font-family: lato-bold;
    src: url("~/fonts/Lato-Bol.ttf");
}

然后是这样的:

<div style="font-family: lato-bold; font-size: 14px;">lato bold font</div>

但它不起作用..

这里有很多答案:

http://stackoverflow.com/questions/13463072/css-font-face-not-working-in-firefox

但是我没有otf文件..

附注，

我想将字体文件保存在我的 mvc 中，而不是通过谷歌字体链接它们

感谢任何帮助!

Answer 1

好吧，您在 url("~/fonts/Lato-Bol.ttf") 中漏掉了字母“d”； - 但假设不是这样，我会在 Chrome 中使用开发人员工具打开您的页面，并确保加载任何文件时没有错误(您可能会在 JavaScript 控制台中看到问题，或者您可以检查“网络”选项卡并查看如果有任何东西是红色的)。

(我没有看到你上面发布的代码有什么明显的错误)

其他要检查的东西:1) 您是否在尝试使用字体系列样式的行上方的 html 中包含了 CSS 文件？2) 你在那个 div 的开发工具的 CSS 面板中看到了什么？ font-family: lato 被划掉了吗？