在菲尼克斯使用自定義字體

我想在我的菲尼克斯應用程序中使用自定義字體。我已將它們放在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"); 
}

來源

2015-07-12 Sheharyar

好，找到了解決辦法。

它看起來像你必須告訴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

來源

2015-07-12 01:45:30 Sheharyar

完美的答案。我會改變菲尼克斯默認包括字體。 –

+11

如果您在'web/static/assets/fonts'中放入字體，您的字體會自動被早午餐複製到'priv/static/fonts /' – slashmili

在菲尼克斯使用自定義字體

回答

相關問題