css - 无法使用@font-face 获取字体

Question

我正在使用 google webfonts helper 为我的字体生成 css，然后下载字体文件:https://google-webfonts-helper.herokuapp.com

我生成了以下内容:

@font-face {
 font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'),
      url('../Content/fonts/lato-v11-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
   url('../Content/fonts/lato-v11-latin-regular.woff') format('woff'); /*   Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

我的字体文件存放在~/Content/fonts

我是这样引用字体的:

body {
font-family: 'Lato', sans-serif;
margin-bottom: 90px;
font-weight: 500;

但是，似乎无论我做什么，我都无法让字体正常工作。我检查了 chrome 中的计算字体系列，并将其设置为 Lato。它也不适用于任何其他浏览器。

Answer 1

我认为您的网址不正确。

url('../Content/fonts/lato-v11-latin-regular.woff2')

这意味着无论您的 CSS 文件位于何处，都返回一个目录，然后转到 foler Content/fonts，但是如果您的字体存储在 ~/Content/fonts 并且您的 CSS 存储在两个子文件夹中，例如/~/assets/css/mycssFile.css 例如你的 url 将不起作用。

您可以尝试 url('/Content/fonts/lato-v11-latin-regular.woff2') 它将使用您网站的根目录，或者您可以尝试更好:< br/>url('/../Content/fonts/lato-v11-latin-regular.woff2') 它将告诉您转到根目录，和尝试返回一个文件夹应该保证你得到根目录。如果这些都不能解决您的问题，那么问题不在于 URL，而在于其他方面。