@font-face 工作不正常答案

【问题标题】：@font-face Is Not Working Properly@font-face 工作不正常
【发布时间】：2016-05-31 13:53:15
【问题描述】：

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

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

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

我尝试过的：

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

【问题讨论】：

您是否下载了正确的字体并在您的 css 中添加了正确的字体系列？
你在使用https吗？如果是这样，只需删除上面导入网址中的http:。
查看stackoverflow.com/questions/42708257/google-fonts-webpack/…

标签： html css

【解决方案1】：

解决您的问题。

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

【讨论】：

【解决方案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');

【讨论】：

如果您没有互联网，@import 将不起作用，如果您希望它工作，请按照“Aditya Ponkshe”给出的步骤操作

【解决方案3】：

首先把它放在你的 head 标签里

  <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 { font-family: 'Open Sans';字体样式：正常；字体粗细：300； src: local('Open Sans Light'), local('OpenSans-Light'), url('你的.ttf文件链接') format('woff2'); } 这种类型......