html - @font-face 无法正常工作

Question

我在使用此导入规则的应用程序中使用来自 Google 字体的 Open Sans 字体:

http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"

在本地测试并且我没有互联网连接时，字体不再有效。

我尝试过的:

我已经下载了这个字体并在我的@font-face 的 CSS 文件中设置了它， 但它显示所有字符都不同。

Answer 1

解决您的问题。

1.您首先必须从 google fonts 下载 .ttf 文件。

2.将该文件放入您的元素，然后将以下内容添加到您的 css。

3.在 url 中，指定您的 .ttf 文件的路径。

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url('your link to .ttf file') format('woff2');
}