使用CSS使用自定义字体?


174

我看到一些新网站在其网站上使用自定义字体(常规Arial,Tahoma等除外)。

并且它们支持大量的浏览器。

如何做到这一点?同时,如果可能的话,还会阻止人们自由下载字体。


javascript替换,例如cufon
tq 2012年

Answers:


364

通常,您可以@font-face在CSS中使用自定义字体。这是一个非常基本的示例:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

然后,简单地在特定元素上使用字体:

.classname {
    font-family: 'YourFontName';
}

.classname是您的选择器)。

请注意,某些字体格式并非在所有浏览器上都有效;您可以使用fontsquirrel.com的生成器来避免过多的工作量。

您可以找到Google字体提供的一组不错的免费网络字体(还具有自动生成的CSS @font-face规则,因此您不必自己编写)。

同时还会阻止人们自由访问字体(如果可能)

不会,您无法使用通过CSS嵌入的自定义字体来为文本设置样式,同时阻止人们下载它。您需要使用图像,Flash或HTML5 Canvas,但它们都不是很实用。

希望对您有所帮助!


感谢您提供详尽的解答。请问这种方法是否也适用于较旧的浏览器?如..IE8 / 7/6?顺便说一句,在Google Webfonts上显示的所有字体都可以免费商业使用吗?
2012年

1
@Don @font-face可与所有相当新的浏览器一起使用,但您需要使用正确的格式;这就是为什么我建议使用fontsquirrel.com自动执行转换和规则生成过程的原因。是的,Google Webfonts免费用于商业用途(有关更多信息的小链接)。
克里斯(Chris)

@Chris,您的声明中是否省略font-style:和违反任何标准?font-weight:@font-face
Pacerier,2014年

1
为了使其正常工作,我必须format('truetype')在源URL和之间添加;
CalculatorFeline

克里斯你好 你知道如何使用这种字体吗?fontsmarket.com/font-download/gothic-821-condensed-bt
Billal Begueradj
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.