部署到生产后,浏览器无法正确呈现字体

时间:2014-03-30 07:06:58

标签: ruby-on-rails apache passenger dev-to-production

我的应用使用的字体系列是:

font-family: 'Ubuntu', Tahoma, sans-serif;

在我(使用capistrano)部署到Apache Web服务器上的服务器后,我可以无错误地访问它,但不会呈现Ubuntu字体。相反,Tahoma正在被渲染。

环境:

  • 操作系统:Ubuntu 12.0 LTS
  • App Server:Apache / 2.2.22(Ubuntu)
  • Web服务器:Phusion Passenger版本4.0.37
  • Rails:Rails 4.0.0
  • Ruby:ruby 1.9.3p125(2012-02-16修订版34643)[x86_64-linux]

我很乐意提供更多信息,告诉我你需要什么。

1 个答案:

答案 0 :(得分:0)

底线是ubuntu字体不是系统的标准字体的结果,你必须包含带有动态路径助手的字体文件才能获得它们在生产中工作


<强>字体

我确信你知道,字体必须从文件中呈现。 Web safe字体是所有系统都有字体的字体......但是谁想要安全地播放它??

Web fonts相对较新,允许您从一系列文件中呈现vectorized字体。喜欢FontSquirrel's web fonts generatorGoogle's font library - 允许您动态包含字体

您的ubuntu字体是web font - 您需要将其打包到您的应用中,以便它可以跨平台工作:

  

Ubuntu's WebFont collection

     

现在可以通过CSS将Ubuntu字体系列用作webfont   @ font-face机制,自2010年12月21日起受到支持   通过Google Font API。 Google Font API是一种跨浏览器系统   这让游客可以看到Ubuntu字体的清晰度和美感   家庭您的网站,而不必担心他们的字体   已在本地安装。


<强>路径

您可以使用Google的字体api渲染字体,也可以使用SCSS调用它们:

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "http://fonts.googleapis.com/css?family=Ubuntu" %>

#app/assets/stylesheets/fonts.css.scss
@font-face
    font:
        family: 'Ionicons'
        weight: normal
        style: normal
        src: asset_url('layout/fonts/IonIcons/ionicons.eot?v=1.4.1')
        src: asset_url('layout/fonts/IonIcons/ionicons.eot?v=1.4.1#iefix') format('embedded-opentype'), asset_url('layout/fonts/IonIcons/ionicons.ttf?v=1.4.1') format('truetype'), asset_url('layout/fonts/IonIcons/ionicons.woff?v=1.4.1') format('woff'), asset_url('layout/fonts/IonIcons/ionicons.svg?v=1.4.1#Ionicons') format('svg')