使用LeagueGothic字体

Question

我正在尝试在我的网站上使用'LeagueGothic'字体或类似的变体.例如在'http://www.woostercollective.com'和'http://www.superchief.tv'这样的网站上用作标题.虽然出于某种原因,在我通过firebug拖出它们的标题样式并将它们放入我的CSS之后,它仍然在'Arial'渲染.我错过了这种字体的东西 - 我还把语法切换到了' '然后" "尝试了一些其他的变化.

font-family: "LeagueGothic","Helvetica Neue","Helvetica","Arial";

Answer 1

您的字体未显示,因为它未安装在您的计算机上,以及您为网站提供服务的几乎所有其他字体.SuperChief通过托管字体文件本身并使用@font-face声明将字体添加到CSS中来解决这个问题:

@font-face {
    font-family: 'LeagueGothic';
    src: url('fonts/league_gothic/league_gothic-webfont.eot');
    src: url('fonts/league_gothic/league_gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/league_gothic/league_gothic-webfont.woff') format('woff'),
         url('fonts/league_gothic/league_gothic-webfont.ttf') format('truetype'),
         url('fonts/league_gothic/league_gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

此代码看起来来自FontSquirrel生成器,您可以使用该生成器在页面中包含字体.

您需要将生成的字体文件存储在服务器上,并在@font-face声明中引用它们.然后你可以像在OP中那样指定它们:

font-family: "LeagueGothic","Helvetica Neue","Helvetica","Arial";

请注意,每个人都font-family需要它自己的@font-face声明.

ceejayoz在评论中提出的一个好处是,某些字体需要在网页中使用许可.FontSquirrel也为您提供此警告,因此请检查并确保您可以使用页面中的字体.

另一个解决方案是让Google在他们的Webfonts服务上为您托管字体.它比使用你自己的@font-face更快更容易,但你得到的选择更加有限,不包括你想要的那种.可以找到类似的字体或替换.