外部css中的多个字体答案

【问题标题】：Multiple font-face in external css外部css中的多个字体
【发布时间】：2012-07-17 19:18:56
【问题描述】：

我知道在 css 上可以有 multiple font-faces。现在我有两个使用这些字体的 html 页面，但将来会有更多；现在这些字体是通过内联 css 声明并通过类使用的。我真正想要的是将我所有的字体包装成一个 fonts.css，然后在每个单独的 html 页面上引用该 css 并使用 <p class="...-font"><p>

所以我的字体的 css 是这样的：

@font-face {
        font-family: 'Komika';
        src: url('/bin/res/font/KOMIKAX_-webfont.eot');
        src: url('/bin/res/font/KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
        url('/bin/res/font/KOMIKAX_-webfont.woff') format('woff'),
        url('/bin/res/font/KOMIKAX_-webfont.ttf') format('truetype'),
        url('/bin/res/font/KOMIKAX_-webfont.svg#KomikaAxisRegular') format('svg');
        font-weight: normal;
        font-style: normal;
}
.komika-font {font: 30px 'Komika', Tahoma, sans-serif;}

@font-face {
        font-family: 'Nevis';
        src: url('/bin/res/font/nevis-webfont.eot');
        src: url('/bin/res/font/nevis-webfont.eot?#iefix') format('embedded-opentype'),
        url('/bin/res/font/nevis-webfont.woff') format('woff'),
        url('/bin/res/font/nevis-webfont.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}
.nevis-font {font: 500% 'Nevis', Tahoma, sans-serif;}

而html是这样的：

<head>
<link rel="stylesheet" href="/bin/res/style-fonts.css.php" type="text/css" />
<link rel="stylesheet" href="/bin/res/style.css.php" type="text/css" />
<title><?php echo $photo_title ?></title>
</head>

<body>
    <h1 class="____">Some text here</h1>
<body>

在____处应该是“nevis-font”，但 IDE (Dreamweaver) 甚至不会自动完成。

有可能吗？因为我试过了，还是不行（选择的字体没有显示出来）。

我想我明白了，问题是包含字体的 css 不能像我一样以 .php 结尾。我只使用 *.css.php 因为 .php 强制服务器压缩 css 文件。

【问题讨论】：

您应该始终向我们展示什么不起作用。向我们展示有效但您不想要的方法很有用，但无助于我们找出您真正想要做的事情的错误之处。
我有点担心您将字体之类的资产放入 /bin/ 目录。
好的，我会上传更多信息，css 和 html 的内容。还有哪些有用的信息？将字体放入 /bin/ 有什么问题？这是一个个人网站，文件夹的结构有点特别：P
@DiAlex：该文件是否确实存在于您指定的路径中？使用 Chrome 开发者工具或 Firebug 来检查您的请求。确保它们被正确返回，并且文件的内容是你所期望的。
此外，您应该根据em 定义字体大小，而不是百分比或像素，以支持需要更大字体的人。

标签： html css font-face

【解决方案1】：

是的，这是可能的。我们需要更多关于您曾经遇到的问题的详细信息，以便回答更详细的答案。

【讨论】：

我发布了更多信息，希望对您有所帮助

【解决方案2】：

问题是包含字体的 css 不能像我一样以 .php 结尾。我只使用 *.css.php 因为 .php 强制服务器压缩 css 文件。

【讨论】：