Source Sans Pro Fonts 不适用于开发 Rails 应用程序答案

【问题标题】：Souce Sans Pro Fonts not working on development Rails AppSource Sans Pro Fonts 不适用于开发 Rails 应用程序
【发布时间】：2019-06-18 06:45:09
【问题描述】：

我正在构建一个 Rails 应用程序，它需要使用 Source Sans Pro 字体。我无法在 HTML 标记中导入字体（因为此过程会增加页面加载时间），为此，我下载了谷歌字体网站中的 .ttf 字体（仅常规、浅色和半粗体字体）。

字体不起作用，回退sans serif正在执行，我已将ttf's文件放在app/assets/fonts/目录中，添加到我的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。请问，我怎样才能正确导入和使用谷歌下载的字体？

【问题讨论】：

您是否有任何理由想直接在资产管道中使用该字体？您可以将 google 字体链接添加到您的 src: google_font_link，我认为它仍会与您的样式一起编译
原因是加载字体的时间，如果我将字体添加到我的资产管道中，加载页面的时间会更快加载
是的，我明白这一点，但我的意思是，你添加的链接不是头部，而是 _font.scss 文件，它将被编译，然后它会被缓存，所以它总是第一次编译后的部分资产，第一次编译后加载时间减少。 @font-face { font-family: 'Source Sans Pro'; src: "https:googlefonts/sourcesanslink.ttf"; font-weight: normal; font-style: normal; }

标签： ruby-on-rails ruby fonts asset-pipeline assets

【解决方案1】：

字体格式（EOT、TTF、WOFF、SVG、WOFF2...）有很多选择！不幸的是，尽管格式多种多样，但没有一种适用于所有浏览器。这是什么意思？您必须使用多种字体格式来提供一致的体验。 reference from this link

这里是设置谷歌字体的几个步骤（包括对您的设置的更正）

将 3 个字体文件（eot、svg 和 ttf）放入 app/assets/fonts/ 注释：不幸的是，Google 仅提供来自 google font web 的 ttf，但您可以通过 github raw 或通过 google font heroku apps 选择下载字体名称和下载地址，这里是link source sans pro

用这个 scss 调用字体文件（例如 app/assets/stylesheets/fonts.scss），这里你的设置不同。

@font-face {
    font-family: 'Source Sans Pro';
    src: asset-url('source-sans-pro-v11-latin-regular.eot');
    src: asset-url('source-sans-pro-v11-latin-regular.eot') format('embedded-opentype'),
           asset-url('source-sans-pro-v11-latin-regular.woff') format('woff'),
           asset-url('source-sans-pro-v11-latin-regular.ttf') format('truetype'),
           asset-url('source-sans-pro-v11-latin-regular.svg#Source Sans Pro') format('svg');
    font-weight: normal;
    font-style: normal;
}

从您的其他类 (base/globals.scss) 中调用字体系列名称
```
* {
  font-family: 'Source Sans Pro', sans-serif;
}
```
通过您的 app/assets/application.scss 进行导入（这里对您的问题进行两个更正，不要使用 _fonts.scss 而是使用 fonts.scss 并使用 fonts.scss 而不是字体导入）
```
@import 'fonts.scss';
# make sure your call fonts.scss first before you use it
@import 'base/globals.scss';
```

【讨论】：