部署到生产后浏览器未正确呈现字体

Question

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

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

在我将（使用 capistrano）部署到 Apache 网络服务器上的服务器后，我可以毫无错误地访问它，但不会呈现 Ubuntu 字体。相反，正在渲染 Tahoma。

环境：

• 操作系统：Ubuntu 12.0 LTS
• 应用服务器：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]

我很乐意提供更多信息，请告诉我您需要什么。

Answer 1

底线是 ubuntu 字体不是系统的标准字体的结果并且您必须包含带有动态路径帮助器的字体文件才能让它们工作生产

---

字体

我相信您知道，字体必须从文件中呈现。 Web safe 字体是所有系统都有字体的字体...但是谁愿意安全使用它！？

Web fonts 相对较新，它允许您从一系列文件中渲染vectorized 字体。 FontSquirrel's web fonts generator 或 Google's font library 之类的 -- 允许您动态包含字体

您的ubuntu 字体是web font - 您需要将它与您的应用打包，以便它可以跨平台工作：

Ubuntu's WebFont collection

您现在可以通过 CSS 将 Ubuntu 字体系列用作网络字体 @font-face 机制，从 2010 年 12 月 21 日开始支持 通过 Google 字体 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')