2

我正在尝试在 CakePHP 中使用自定义字体，但它似乎不起作用。

我从http://www.dafont.com/ssf4-abuket.font（街头霸王字体！！）获取字体。我将 ttf 字体文件存储到 webroot/css。

这是我的 CSS：

@font-face {
    font-family: 'SF';
    src: url('StreetFighter.ttf') format('truetype');
}

p {
    height: 50%;
    margin: 30px 0;
    text-align: center;
    font-size: 2.2rem;
    font-family: 'SF';
    color: #000;
}

但是，当我使用不同的字体时，例如http://www.1001freefonts.com/中的 Arkitech ，其代码相同但文件名不同。

4

1 回答 1

1

由于您的字体只有一个 .ttf 文件，因此并非所有浏览器都可以使用 .ttf 字体文件。您必须在 @font-face css 中声明替代字体格式。

您可以使用在线转换器生成这些其他字体格式。（例如： http: //freedockstar.com/fontface/）。

然后你需要有以下字体声明：

@font-face {
font-family: 'SF';
src: url('StreetFighter.eot'); /* IE9 Compat Modes */
src: url('StreetFighter.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('StreetFighter.woff') format('woff'), /* Modern Browsers */
     url('StreetFighter.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('StreetFighter.svg') format('svg'); /* Legacy iOS */
}

我已经用这个工具尝试了你的字体，它会生成你的 webfont 的工作预览。

于 2013-11-13T09:02:38.257 回答