将字体添加到导轨

Question

我正在尝试向 rails 添加自定义字体，但无论我做什么，它似乎都不起作用，我已经在 github 上阅读了一些关于此问题的其他问题，但我无法让它为自己工作.

我已经把字体文件放进去

app/assets/fonts

文件的名称叫做“above.tff”，我已经在我的 CSS 中这样声明它

@font-face {
  font-family: 'above';
  src: url(/assets/above.tff) format('truetype');
}

这个问题的最佳答案是这样说的Official way of adding custom fonts to Rails 4?

然后我将它应用到元素上

font-family: 'above';

它不起作用，我在控制台上收到此错误。

ActionController::RoutingError (No route matches [GET] "/assets/above.tff"):

actionpack (5.1.4) lib/action_dispatch/middleware/debug_exceptions.rb:63:in `call'
web-console (3.5.1) lib/web_console/middleware.rb:135:in `call_app'
web-console (3.5.1) lib/web_console/middleware.rb:28:in `block in call'
web-console (3.5.1) lib/web_console/middleware.rb:18:in `catch'
web-console (3.5.1) lib/web_console/middleware.rb:18:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
railties (5.1.4) lib/rails/rack/logger.rb:36:in `call_app'
railties (5.1.4) lib/rails/rack/logger.rb:24:in `block in call'
activesupport (5.1.4) lib/active_support/tagged_logging.rb:69:in `block in tagged'
activesupport (5.1.4) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (5.1.4) lib/active_support/tagged_logging.rb:69:in `tagged'
railties (5.1.4) lib/rails/rack/logger.rb:24:in `call'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `block in call'
activesupport (5.1.4) lib/active_support/logger_silence.rb:20:in `silence'
activesupport (5.1.4) lib/active_support/logger.rb:63:in `block (3 levels) in broadcast'
activesupport (5.1.4) lib/active_support/logger_silence.rb:20:in `silence'
activesupport (5.1.4) lib/active_support/logger.rb:61:in `block (2 levels) in broadcast'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/remote_ip.rb:79:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/request_id.rb:25:in `call'
rack (2.0.3) lib/rack/method_override.rb:22:in `call'
rack (2.0.3) lib/rack/runtime.rb:22:in `call'
activesupport (5.1.4) lib/active_support/cache/strategy/local_cache_middleware.rb:27:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/executor.rb:12:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/static.rb:125:in `call'
rack (2.0.3) lib/rack/sendfile.rb:111:in `call'
railties (5.1.4) lib/rails/engine.rb:522:in `call'
puma (3.11.0) lib/puma/configuration.rb:225:in `call'
puma (3.11.0) lib/puma/server.rb:624:in `handle_request'
puma (3.11.0) lib/puma/server.rb:438:in `process_client'
puma (3.11.0) lib/puma/server.rb:302:in `block in run'
puma (3.11.0) lib/puma/thread_pool.rb:120:in `block in spawn_thread'

Answer 1

试试这个font-url 方法，它可以正确路由和检查assets/fonts 目录

@font-face {
  font-family: 'above';
  src: font-url('above.tff') format('truetype');
}

几件事，

1. 我真的怀疑文件名是above.tff 之前没有看到tff 的字体扩展名，可能是错字，但我认为应该是ttf

2. 改成以上代码后，将你的css文件重命名为scss的扩展名