Souce Sans Pro字体不适用于Rails应用程序

Question

我正在构建一个rails应用程序，它需要使用Source Sans Pro字体。我无法在HTML中导入字体(因为这个过程会增加页面加载时间)，为此，我在Google字体站点中下载了.ttf字体(只有普通字体、轻体字体和半粗体字体)。

字体不工作，回退sans serif正在执行，我将ttf's文件放在app/assets/fonts/ dir中，并将以下代码添加到assets.rb中：

Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts", "node_modules")

Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

在我的app/assets/stylesheets/_fonts.scss中，我有以下代码：

@font-face {
  font-family: 'Source Sans Pro';
  src: asset-url('SourceSansPro-Regular.ttf');
  src: asset-url('SourceSansPro-Regular.ttf') format('ttf'),
       asset-url('SourceSansPro-Light.ttf') format('ttf'),
       asset-url('SourceSansPro-SemiBold.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

在global.scss文件中，我有：

* {
  font-family: 'Source Sans Pro', sans-serif;
}

所有.scss文件都导入到一个application.scss文件中：

@import 'fonts';
@import 'base/globals.scss';

在浏览器控制台中，不显示任何错误，但当模板呈现时，字体Source Sans Pro无效，回退sans-serif将呈现。请问，我如何才能正确导入和使用谷歌下载的字体？

Answer 1

字体格式(EOT，TTF，WOFF，SVG，WOFF2.)有这么多的选择！不幸的是，尽管格式千差万别，但并不是所有浏览器都能使用单一的格式。这是什么意思？你必须使用多种字体格式来提供一致的体验。来自此链接的引用

下面是设置google字体的几个步骤(包括对设置的更正)

1. 将3个字体文件(eot、svg和ttf)放入app/assets/ fonts / note:遗憾的是，Google只是从google字体网站提供ttf，但您可以通过github生或通过google字体heroku应用程序选择字体名称并下载，这是链接源sans pro。
2. 使用这个scss调用字体文件(例如app/assets/样式表/fonts.scss)，在这里设置不同的。 @字体-face{字体-系列：‘源Sans Pro'；src: asset-url('source-sans-pro-v11-latin-regular.eot')；asset-url('source-sans-pro-v11-latin-regular.eot')格式(‘embedded-opentype’)，asset-url('source-sans-pro-v11-latin-regular.woff')格式(‘woff’)，asset-url('source-sans-pro-v11-latin-regular.ttf')格式(‘truetype’)，asset-url('source-sans-pro-v11-latin-regular.svg#Source Sans Pro‘格式(’svg‘)；字体大小:普通；字体样式:正常；}
3. 从另一个类调用字体-姓氏(base/globals.scss) *{字体-家族：“源Sans Pro”，sans-serif；}
4. 通过app/assets/application.scss进行导入。fonts(这里有两处针对您的问题的更正不是使用_fonts.scss，而是使用fonts.scss，并使用fonts.scss而不是字体导入) @import ' fonts.scss '；#在使用@import‘base/globals.scss’之前确保先调用fonts.scss；