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.您首先必须从谷歌字体下载.ttf文件。

2.在项目中输入该文件，然后将以下内容添加到您的CSS中。

3.在网址中，指定.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

第一次把它放在头顶标记

  <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; }

@ font-face无法正常工作

3 个答案: