在我的css中使用Lato字体(@font面)

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）您是否将CSS文件包含在html中尝试使用字体系列样式的行上方？2） 您在该div 的开发人员工具的 CSS 面板中看到了什么？ 字体家族：lato 被划掉了吗？

Answer 2

Font Squirrel 有一个很棒的网络字体生成器。

我认为您应该在这里找到生成 OTF 字体所需的内容以及使用它们所需的 CSS。它甚至将支持较旧的IE版本。