字体未应用于我的 Web 应用程序答案

【问题标题】：Font not applied in my web application字体未应用于我的 Web 应用程序
【发布时间】：2013-09-27 10:43:12
【问题描述】：

我正在开发grails Web 应用程序，我正在尝试应用一个名为open sans 的font，但它没有应用于我的Web 应用程序。我遵循的程序是：

我已经把下面的代码放在了我的extended.css文件中

@font-face {
    src: url('../../images/font/openSans.woff');
    font-family: 'open sans';
    /*url('openSans.woff') format('woff'),*/
    font-style: normal;
    font-weight: normal;
}

body{
    font-family: 'open sans';
}

我错过了什么？

【问题讨论】：

您可能一开始就缺少字体。在指定的相对 URL 上真的可用吗？
我的 IDE 显示字体文件可用。
重要的是浏览器是否找到了字体文件。使用浏览器的开发者工具检查发生了什么（网络日志、错误日志）。

标签： css grails font-face gsp

【解决方案1】：

Open Sans 是一种 Google 字体，您可以在您的应用程序中使用它，如 link 中所述。

将以下内容添加到您的视图或布局中

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Google Fonts API 将生成必要的特定于浏览器的 CSS 以使用字体。您需要做的就是将字体名称添加到您的 CSS 样式中。例如：

font-family: 'Open Sans', sans-serif;

参见示例here。

【讨论】：

【解决方案2】：

从任何网站下载您的字体。到webFont Generator。它将生成一个 zip 文件。在其中找到您的 .css 文件并在样式标记中复制并粘贴代码到您的 Web 中。还将所有文件粘贴到同一目录中。它将运行所有浏览器。

@font-face {
font-family: 'Philosopher';
src: url('WebRoot/fonts/philosopher-regular.eot');
src: url('WebRoot/fonts/philosopher-regular.eot?#iefix') format('embedded-opentype'),
     url('WebRoot/fonts/philosopher-regular.woff') format('woff'),
     url('WebRoot/fonts/philosopher-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

body{
font-size: 13px;
    font-family: "Philosopher";
}

此代码 sn-p 适用于 philospher 字体。您可以使用基于此示例的任何字体。享受吧。

【讨论】：