HTML/CSS - 使用自定义字体/FontSquirrel答案

【问题标题】：HTML/CSS - Using Custom Font / FontSquirrelHTML/CSS - 使用自定义字体/FontSquirrel
【发布时间】：2013-10-30 15:56:38
【问题描述】：

我下载了这个字体 (https://www.google.com/fonts/#QuickUsePlace:quickUse/Family:Underdog)，然后使用了 FontSquirrel (http://www.fontsquirrel.com/tools/webfont-generator)。

但是，我不确定应该将文件放在 Eclipse 中的哪个位置...

这是在 FontSquirrel 生成的一个 css 文件中，我将它放在我的 CSS 文件中。

@font-face {
font-family: 'underdogregular';
src: url('underdog-regular-webfont.eot');
src: url('underdog-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('underdog-regular-webfont.woff') format('woff'),
     url('underdog-regular-webfont.ttf') format('truetype'),
     url('underdog-regular-webfont.svg#underdogregular') format('svg');
font-weight: normal;
font-style: normal;

}

FontSquirrel 也生成了这些文件：

underdog-regular-demo.html

underdog-regular-webfont.eot

underdog-regular-webfont.svg

underdog-regular-webfont.ttf

underdog-regular-webfont.woff

有人知道我应该把这些放在哪里吗？

感谢您的帮助。

【问题讨论】：

您可以将这些字体放在路径中，并将此路径添加到 url 中，如 /font
但如果你信任谷歌字体，你可以使用这个链接：<link href='http://fonts.googleapis.com/css?family=Underdog' rel='stylesheet' type='text/css'>。它会根据浏览器类型自动提供字体。
感谢 sivatumma，这实际上是我首先尝试的...不幸的是，它在我的 Nexus One 模拟器上运行，但在我的三星 Galaxy S2 手机上却没有。

标签： html css fonts

【解决方案1】：

您可以将这些字体文件放在您的 Web 服务器上的某个位置，然后调整 CSS 中的 url 路径以适应。因此，就像您将背景图片上传到 /assets/images/ 文件夹一样：

background-image: url("/assets/images/foo.jpg");

...您可以将字体文件上传到/assets/fonts 目录并相应地调整字体松鼠CSS：

src: url('/assets/fonts/underdog-regular-webfont.eot');
src: url('/assets/fonts/underdog-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('/assets/fonts/underdog-regular-webfont.woff') format('woff'),
     url('/assets/fonts/underdog-regular-webfont.ttf') format('truetype'),
     url('/assets/fonts/underdog-regular-webfont.svg#underdogregular') format('svg');

或者，如果您不想编辑 CSS，只需将它们上传到与 CSS 文件相同的目录即可。

【讨论】：

谢谢奥利！我只是按照你的建议将它们复制到同一个 CSS 目录:)