使用CSS自定义字体?

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

他们支持很多浏览器。

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


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

@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 Fonts提供的免费网页字体(也有自动生成的CSS @font-face规则,因此您不必自行编写)。

同时如果可能,还会阻止人们免费下载字体

不,不可以使用通过CSS嵌入的自定义字体来设置文本的样式,同时防止人们下载它。 您需要使用图片,Flash或HTML5 Canvas,所有这些都不太实用。

我希望这有助于!


要确保您的字体是跨浏览器兼容的,请确保您使用以下语法:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

从这里采取。


您必须下载字体文件并将其加载到CSS中。

Fe我在我的Web应用程序中使用了Yanone Kaffeesatz字体。

我通过加载并使用它

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

在我的样式表中。

链接地址: http://www.djcxy.com/p/87435.html

上一篇: Using custom fonts using CSS?

下一篇: Should I use px or rem value units in my CSS?