@ font-face无法正常工作

Question

我正在使用此导入规则在应用程序中使用Google字体中的Open Sans字体：

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

在本地测试并且没有互联网连接时，该字体不再起作用。

我试过的

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

Answer 1

解决您的问题。

1.您首先必须从Google字体下载.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');
}

Answer 2

使用以下代码在CSS文件中导入Google Web字体。

    @import url('http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800%22');

Answer 3

1把它放在你的头标签内

  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800%22' rel='stylesheet' type='text/css' />

您需要做的就是将字体名称添加到CSS样式中。 例如：

h1 { font-family: 'Open Sans', Arial, serif; font-weight: 400; }