Source Sans Pro 字体不适用于开发 Rails 应用程序

Question

我正在构建一个 rails 应用程序，它需要使用 Source Sans Pro 字体。我无法在 HTML 标签中导入字体（因为此过程会增加页面加载时间），为此，我下载了 google 字体站点中的 .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下载的字体？

Answer 1

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

这里有几个设置 google 字体的步骤（包括对您的设置的更正）

将 3 个字体文件（eot、svg 和 ttf）放入 app/assets/fonts/ 注意：不幸的是 Google 仅提供来自 google font web, but you can download through github raw or through google font heroku apps choose font name and download , here is link source sans pro
的 ttf

用这个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;
}

调用你的其他字体家族名称 class (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';
```

Source Sans Pro 字体不适用于开发 Rails 应用程序

Souce Sans Pro Fonts not working on development Rails App

ruby

fonts

assets

ruby-on-rails

asset-pipeline