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个文件..

P.S。，

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

任何帮助表示赞赏！

Answer 1

好吧，你错过了url中的'd'字母（“〜/ fonts / Lato-Bol.ttf”）; - 但假设不是这样，我会用Chrome中的开发者工具打开你的页面并确保加载任何文件都没有错误（你可能会在JavaScript控制台中看到一个问题，或者你可以查看网络选项卡并查看如果有什么东西是红色的。）

（我发现上面发布的代码没有明显错误）

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

Answer 2

Font Squirrel 有一个很棒的web font generator。

我认为你应该在这里找到你需要的东西来生成OTF字体以及使用它们所需的CSS。它甚至可以支持旧的IE版本。

在我的css中使用Lato字体（@ font-face）

2 个答案: