2015-07-12 131 views
11

我想在我的菲尼克斯应用程序中使用自定义字体。我已将它们放在priv/static/fonts目录中,并正确创建并加载了web/templates/layout/app.html.eex模板中的css文件,但它们不受Phoenix服务器的服务。在菲尼克斯使用自定义字体

/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 

对于采购的字体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"); 
} 

回答

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 

来源:PhoenixTalk - Serving static assets in a Sub-Folder other than the defaults

+9

完美的答案。我会改变菲尼克斯默认包括字体。 –

+11

如果您在'web/static/assets/fonts'中放入字体,您的字体会自动被早午餐复制到'priv/static/fonts /' – slashmili