在Rails 3.1应用程序中使用\` font-face？

css CSS

LGil

2020-03-20

我在使用以下@font-face声明与Rails 3.1应用程序一起使用时遇到麻烦。我将字体放在Asset Pipeline中的资产文件夹中images，stylesheets并在其旁边的文件夹中命名为“ Fonts”。javascripts

这是我使用的声明（由Font Squirrel生成）。

@font-face {
  font-family: 'ChunkFiveRegular';
  src: url('Chunkfive-webfont.eot');
  src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
     url('Chunkfive-webfont.woff') format('woff'),
     url('Chunkfive-webfont.ttf') format('truetype'),
     url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

任何人都可以在其Rails 3.1应用程序上成功使用@ font-face吗？

更新资料

我刚刚阅读了该线程http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/，该声明在声明中更改url为font-url。不幸的是，这似乎也不起作用。

第2505篇《在Rails 3.1应用程序中使用\` font-face？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
斯丁 2020.03.20

虽然这很晚，但您可以使用Compass的+font-face混入来避免所有这些麻烦。mixin通过以下方式使您的生活更轻松

  1. 不记得传统字体脸部剔除的可怕警告

  2. 它在内部为您处理url_helper和格式声明

  3. 记住起来容易得多

女士和先生们，以下声明如下： 

+font-face("#{$font-name}",
  font-files("#{$font-name}.woff", woff, 
  "#{$fontFileName}.ttf", ttf, 
  "#{$fontFileName}.svg", svg), "#{$fontFileName}.eot", normal, normal);
Sam猪猪 2020.03.20

我刚刚在Atomic Object的Spin博客上更新了该文章。这是转换后的CSS（您正在查看Sass语法）

@font-face {
  font-family: "Merriweather";
  src: url(/assets/merriweather-black-webfont.eot);
  src: local("Merriweather Heavy"), local("Merriweather-Heavy"), url(/assets/merriweather-black-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/merriweather-black-webfont.woff) format("woff"), url(/assets/merriweather-black-webfont.ttf) format("truetype"), url(/assets/merriweather-black-webfont.svg#MerriweatherHeavy) format("svg");
  font-weight: 900;
  font-style: normal;
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android