时间戳

首页 > 解决方案 > Souce Sans Pro 字体不适用于开发 Rails 应用程序

ruby-on-rails - Souce Sans Pro 字体不适用于开发 Rails 应用程序

问题描述

我正在构建一个 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渲染了回退。请问，我怎样才能正确导入和使用谷歌下载的字体？

标签： ruby-on-railsrubyfontsasset-pipelineassets

解决方案

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

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

  1. 将 3 个字体文件（eot、svg 和 ttf）放在 app/assets/fonts/ 注释：不幸的是，谷歌只从google font web提供 ttf ，但您可以通过github raw或通过google font heroku 应用程序选择字体名称并下载，在这里是链接源sans pro

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

  3. 从您的其他类（base/globals.scss）中调用字体系列名称

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

  4. 通过您的 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';

推荐阅读