如何使用您喜欢的任何字体css3

苏珊史密斯 经过 苏珊史密斯  |  2013年1月10日

自定义字体是设计师CSS3最潜在的吸引力方面。与之 Font-Face. 规则,无论用户是否安装,您都可以呈现您在网页文本中拥有的任何字体。

与大多数CSS3技术一样,基本代码非常简单,但实际现实有点复杂。

在此简短的教程中,我们将通过页面中包含自定义字体的基础知识。

 

上传字体

首先,确保要使用的字体是用于Web使用的许可。几乎所有免费字体都可以在网站上使用,并且许多高级字体可提供覆盖Web使用的许可证。

接下来将所选字体上传到服务器。您可能希望将其存放在专用“fonts”目录但这是可选的。

请记住包含您计划使用的字体的任何变体的文件,例如粗体或斜体。您可以为其其余的Internet Explorer和OTF(OpenType)或TTF(TTUETYPE)使用EOT(嵌入式Opentype)文件。 (其他选项包括Woff(Web Open Font Format)和SVG(可缩放向量图形),但我们将粘在此处的更常见类型。)

记下字体文件存储在服务器上的位置。

 

将字体面部部分添加到CSS代码

打开您正在使用的页面的HTML或CSS文件。添加A. Font-Face. 宣言为样式代码:

@font-face {
}

在里面 Font-Face. 部分,给出字体您可以稍后用来引用它的名称:

font-family: 'lovelyFont';

接下来,仍然在里面 Font-Face. 部分,提供EOT文件的位置:

src: url('fonts/lovely_font.eot');  

根据需要更改字体的位置和名称。接下来添加OTF和/或TTF字体:

src: 
	url('fonts/lovely_font.otf') 
src: 
	url('fonts/lovely_font.ttf') 

这是必要代码的裸露骨骼,在许多情况下是足够的。但是,我们可以采取额外的步骤来使代码更加可靠。首先将此部分扩展为包含字体文件类型的指示灯:

src: 
	url('fonts/lovely_font.otf') 
	format('opentype');
src: 
	url('fonts/lovely_font.ttf') 
	format('truetype');

作为另一种可选的效率测量,我们可以让浏览器检查字体的本地副本,以防用户已拥有它。再次扩展代码,如下所示,在指定URL之前添加本地部分,以便在必要时才下载字体:

src: 
	local('Lovely Font'),
	local('Lovely-Font'),
	url('fonts/lovely_font.otf') 
	format('opentype');
src: 
	local('Lovely Font'),
	local('Lovely-Font'),
	url('fonts/lovely_font.ttf') 
	format('truetype');

对OTF和TTF的添加是相同的。我们以后指定字体名称 当地的 keyword.

在这种情况下,我们有两条线指定本地字体,因为字体名称有多个单词。连字符的版本迎合字体名称存储在某些操作系统上–如果字体仅在其名称中只有单个单词,则不需要此附加线。如果您碰巧知道字体可以在不同的系统上有不同的名称,请包括您的每个可能性 当地的 section.

 

将字体应用于页面元素

最后,我们可以将字体应用于页面元素。在特定元素或元素组的CSS代码中,只需指定您使用的字体名称,包括您选择的任何返回:

div { font-family: 'lovelyFont', sans-serif; }

 

包括字体变体

例如,如果您希望使用粗体版本,只需包含另一个 Font-Face. 与粗体字体文件URL的部分和声明“font-weight:bold;”。针对应用于它的自定义字体的任何元素指定粗体的字体重量,浏览器将自动呈现粗体版本:

/*default version*/
@font-face {
	font-family: 'lovelyFont';
	src: url('fonts/lovely_font.eot'); 
	src: 
		local('Lovely Font'),
		local('Lovely-Font'),
		url('fonts/lovely_font.otf') 
		format('opentype');
}
/*bold version*/
@font-face {
	font-family: 'lovelyFont';
	src: url('fonts/lovely_font_bold.eot'); 
	src: 
		local('Lovely Font Bold'),
		local('Lovely-Font-Bold'),
		url('fonts/lovely_font_bold.otf') 
		format('opentype');
	font-weight: bold;
}
/*container element*/
div { font-family: 'lovelyFont', sans-serif; }
/*span elements inside the container div*/
span { font-weight: bold; }

那’s it!

 

您是否使用CSS3来展开您可用的类型面孔?你使用像Adobe这样的服务吗?’s Typekit or Google’S Webfonts?让我们在评论中知道。

特色图片/缩略图, 字体 image via Shutterstock.