CSS如何使用自定义字体文件

html-css09

CSS如何使用自定义字体文件,第1张

是@font-face,语法如下: @font-face {  

  [ font-family: <family-name> ] ||

  [ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]# ] ||

  [ unicode-range: <urange># ] ||

  [ font-variant: <font-variant> ] ||

  [ font-feature-settings: normal | <feature-tag-value># ] ||

  [ font-variation-settings: normal | [ <string> <number>] # ||

  [ font-stretch: <font-stretch> ] ||

  [ font-weight: <weight> ] ||

  [ font-style: <style> ]

}

<family-name>就是家族体系名称,例如sans-serif无衬线字体。

取值

font-family    这里指定的字体名字将会被用于font或font-family属性,在元素的使用字体的字体名称就是这里设定的。

src                远程字体文件位置的URL或者用户计算机上的字体名称, 可以使用local语法通过名称指定用户的本地计算机上的字体( 例如src: local('Arial'))。 如果找不到该字体,将会尝试其他来源,直到找到它。

font-variant    字态

font-stretch    字体描边.

font-weight    字重

font-style       对于src所指字体的描述。如果所需字体符合描述,则采用本font-face所定义的字体。

unicode-range在该@font-face中定义的unicode字体范围

例子:用到了用户本地字体"Helvetica Neue Bold"的备份;如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过),就会用下载的字体"MgOpenModernaBold.ttf"来代替:

@font-face {

  font-family: MyHelvetica

  src: local("Helvetica Neue Bold"),  local("HelveticaNeue-Bold"),  url(MgOpenModernaBold.ttf)

  font-weight: bold

}

特殊字体一般不是说不能添加,而是考虑到用户电脑上预装的字体有限,所以局限在宋体和微软雅黑两种字体,css属性中有个font属性,例如{font-family:"迷你简菱心"},在装过这个字体的的电脑会有效果,但是再没有装过的电脑可能就是其它字体了,一般会解析为宋体,问题解决一般由两种解决方案。

第一:css3下载字体,代码如下

@font-face

{

font-family:

'自己命名字体名字'

src:

url('字体路径')

src:

url('FileName.eot?#iefix')

format('embedded-opentype'),

/*其它格式*/

url('FileName.woff')

format('woff'),

url('FileName.ttf')

format('truetype'),

url('FileName.svg#FontName')

format('svg')

font-style:

normal

font-weight:

normal

/*设置默认样式*/

}

.aa{font-family:"自己命名字体名字"}

不兼容ie8及以下浏览器

第二:切png图片

之前如果想在自己的网站使用某些好看的字体,总是迫不得已得在PS里先把字体图片做好。虽然这样做也能达到我们想要的效果,但是这样就增加了HTTP请求(如果在多处使用的话),即使合并所有图片,也不好管理,灵活性不高,哪一天想换种更好看的字体,那工作量,想想都没劲!幸好CSS3新增了@font-face模块,可以帮助我们轻松解决Web页面中使用优雅字体的方式,而且我们可以根据需要自定义多种字体,但是每个@font-face只能定义一种,若需要多个字体就启用多个@font-face规则。

@font-face 主要就是把自己想要的,或者自己定义的Web字体嵌入到Web页面中,然后这些字体就会被放置在服务器上,浏览器会根据指定的命令将对应的字体下载到本地缓存,使用它来修饰文本。也就是我们所说的Web字体嵌入。

@font-face 语法:

font-family : 其属性值指定的是自定义的字体名称,最好就是直接使用下载字体的默认文件名,然后需要将它引用到元素的font-family中。虽然自定义了自己想要的字体,但是也得在元素中使用它才有效果。【必选属性】

src : 其属性值指定自定义字体的存放路径,可以是相对路径或者绝对路径。format()指定的是自定义的字体格式,主要用来帮助浏览器识别,主要有:truetype,opentype,truetype-aat,svg,embedded-opentype等类型。【必选属性】

font-weight 和 font-style :分别用来指定字体是否加粗和定义字体样式。当然还可以设置font-size等字体属性。【可选属性】