如何在 cakePhp 3 中使用 Open Sans 字体？答案

【问题标题】：How to use Open Sans font with cakePhp 3?如何在 cakePhp 3 中使用 Open Sans 字体？
【发布时间】：2015-12-19 11:51:52
【问题描述】：

我正在使用 cakePhp 3.0.4 来构建我的应用程序。据我了解，cakePhp 3 使用 Zurb Foundation，我不明白如何更改默认字体（无衬线）

base.css 文件第 11 行指定了默认字体：

/*  font-family: sans-serif; *//* 1 */
font-family: sans-serif;
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */

到目前为止我已经尝试过： 1.在base.css第一行加载字体：@import url(http://fonts.googleapis.com/css?family=Open+Sans);

我也试过了：

在default.ctp中加载字体：

$this->Html->css('http://fonts.googleapis.com/css?family=Open+Sans:300,400,700')
将 base.css 字体系列更改为 'Open sans', sans-serif;

目前没有成功。如何在 cakePhp 3 应用程序中正确使用 Open sans -font？

谢谢。

【问题讨论】：

您使用的是CSS 还是SCSS？
如果没有看到你的 css 的其余部分，真的很难提供帮助，但是你是否覆盖了 Foundations 默认字体系列，即 Helvetica？
另外，如果 base.css 在你的foundation.css 之前被调用，它可能会覆盖任何字体，因为它使用Helvetica。如果您希望自定义 Foundation，我会改用 SCSS 版本：regbirch.com/blog/cakephp-zurb-foundation-livereload
请看整个base.css pastebin.com/kkzJP3DP
啊，您正在尝试更改规范化。在下面回答。

【解决方案1】：

你必须使用font-family: 'Open Sans'; 而不是font-family: 'Open-sans';

如果你打开google字体api的url：

你必须使用的名字是由设置的

@font-face {
  font-family: 'Open Sans';
  ...
}

【讨论】：

还没有成功。在 base.css 第一行 @import {url(fonts.googleapis.com/css?family=Open+Sans); } 然后 {@font-face { font-family: 'Open Sans'; } } 没用

【解决方案2】：

Zurb版权注释后添加：

@import {url(fonts.googleapis.com/css?family=Open+Sans); }

然后在 Foundation 代码中找到以下每个实例：

font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;

并将其更改为：

font-family:"Open Sans","Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;

我已经离开了 Helvetica，所以如果 Google Fonts 失败，它会退回到那个位置。

希望对您有所帮助。

【讨论】：