在Phoenix中使用自定义字体

She*_*yar 13 fonts elixir phoenix-framework

我正在尝试在Phoenix应用程序中使用自定义字体.我已将它们放在priv/static/fonts目录中,并在web/templates/layout/app.html.eex模板中正确创建并加载了css文件,但它们并未由Phoenix Server提供服务.

/Users/Psycho/code/elixir/my_app/
? priv/
  ? repo/
  ? static/
    ? css/
    ? fonts/
      ? walsheim/
          gt-walsheim-light-web.svg
          gt-walsheim-light-web.eot
          gt-walsheim-light-web.ttf
          gt-walsheim-light-web.woff
Run Code Online (Sandbox Code Playgroud)

用于获取字体的css文件:

// my_app/priv/css/fonts.css

@font-face {
    font-family: "Walsheim";
    font-style: normal;
    font-weight: 300;
    src:
        url("/fonts/walsheim/gt-walsheim-light-web.eot?#iefix") format("embedded-opentype"),
        url("/fonts/walsheim/gt-walsheim-light-web.woff") format("woff"),
        url("/fonts/walsheim/gt-walsheim-light-web.ttf") format("truetype"),
        url("/fonts/walsheim/gt-walsheim-light-web.svg#Walsheim") format("svg");
}
Run Code Online (Sandbox Code Playgroud)

She*_*yar 20

好的,找到了解决方案.

看起来你必须告诉phoenix哪些目录要为静态文件服务.我进入了我的my_app/lib/my_app/endpoint.ex文件并更新了Plug.Static插件以提供fonts文件夹:

defmodule MyApp.Endpoint do
  use Phoenix.Endpoint, otp_app: :my_app

  plug Plug.Static,
    at: "/", from: :my_app, gzip: false,
    only: ~w(css images js fonts favicon.ico robots.txt)

  # Other Stuff ...
end
Run Code Online (Sandbox Code Playgroud)

来源:PhoenixTalk - 在默认值以外的子文件夹中提供静态资源

  • 如果您将字体放在`web/static/assets/fonts`中,您的字体会自动被早午餐复制到`priv/static/fonts /` (11认同)
  • 完美答案.我会更改Phoenix以默认包含字体. (9认同)