使用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