CSS3 font-face使用

时间: 2019-02-14阅读: 324标签: 字体

在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3,web 设计师可以使用他们喜欢的任意字体。

当您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

@font-face的语法规则: 

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
      [font-stretch: <stretch>];
      [unicode-range: <unicode-range>];
}


 font-family定义字体的名称,src用来指定字体文件地址,可以是相对地址或者绝对地址。@font-face规则的各描述属性说明如下::

font-style
  • ormal
  • italic
  • oblique
可选。定义字体的样式。默认是 "normal"。
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
可选。定义字体的粗细。默认是 "normal"。
unicode-rangeunicode-range可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

字体格式有太多选择,不幸的是始终没有一个能在所有的浏览器上通用。这意味着,你必须使用多种字体的方案来保持用户跨平台的一致性体验。当前,在web上使用各种不同字体格式有:TTF、OTF、WOFF、EOT 和 SVG 。具体不同字体在各品牌浏览器的支持情况,这里不一一介绍。

在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot') format('eot');/*IE*/
    src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
  }

但为了让各多的浏览器支持,你也可以写成: 

@font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
  }

使用@font-face定义自己的WEB字体如下:  

@font-face {
  font-family: 'iconfont';
  src: url('../fonts/iconfont.eot');
  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/iconfont.woff') format('woff'),
  url('../fonts/iconfont.ttf') format('truetype'),
  url('../fonts/iconfont.svg#iconfont') format('svg');
}

题外话

如何获取我们所需要的字体文件呢?其一,到付费网站购买字体;其二,到免费网站下载字体。当我们获取到字体,如何得到同一字体的.eot,.woff,.ttf,.svg字体格式。这里推荐一个网页工具font squirrel,它能有效帮助我们生成不同字体格式文件。比如,我们手上已经有目标字体的ttf格式文件,上传该ttf文件,font squirrel便能帮我们方便地生成其他字体格式文件。关于font squirrel的具体使用,请参考fjdingsd博文,这里不再赘述。



链接: http://www.fly63.com/article/detial/2019

vue项目引入外部字体

UI设计图有华文黑体,担心客户端没有该字体,将huawen.ttf字体文件,放入项目中:创建一个font.scss(或font.css)文件:在main.js中引入就可以直接使用了

canvas绘制网络字体几种方法

最近在用canvas绘图时遇到了一个令人头痛的问题:canvas绘制网络字体时没效果,遂开始了一番解决方案查找测试,中间也碰到了不少坑,于是写下此篇文章做个总结,如果大家在用canvas时遇到了同样的问题,希望对大家有一定的帮助

Css @font-face 网页中嵌入特殊字体方法

要得到single Malta字体,不外乎两种途径,其一找到付费网站购买字体,其二就是到免费网站DownLoad字体。当然要给钱的这种傻事我想大家都不会做的,那我们就得到免费的地方下载,在哪有呢?

FontAwesome 图标字体库的使用

在前端开发中,许多新手常会遇见一个问题,参考的网页上有类似下图的图标,但在资源里却找不到对应的文件,这是因为这些网页使用了图标库。这里介绍一种常见的图标库——FontAwesome的使用。

CSS引入本地字体与在线字体

有些时候为了强调某些文字,需要使用一些比较特别的字体,CSS中现在也可以比较方便的引入字体了,如果需要引用在线字体,首先需要找到在线字体,国内推荐谷歌字体

如何实现label长度固定,文字分散分布的效果

这种效果主要通过text-align-last属性来实现。text-align-last:规定如何对齐文本的最后一行,当文本只有一行的时候,text-align属性不设置,text-align-last也是有用的。当然这只是针对非IE和Safiri而言。

字体是如何渲染的?影响字体渲染的因素

Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset= 信息,这一般有最高的优先级;网页本身 meta header 中的 Content-Type 信息的 charset 部分,对于 HTTP 头未指定编码或者本地文件,一般是这么判断;假如前两条都没有找到,浏览器菜单里一般允许用户强制指定编码;

css蚀刻字体_css3如何实现蚀刻文本?

css3利用text-shadow属性来实现蚀刻文本,创建文本显示为“蚀刻”或刻在背景中的效果。背景必须比阴影暗,效果才能发挥作用。 文字颜色应该稍微褪色,使其看起来像是刻在背景上的。

前端开发你该知道的字体 font-family

小小的字体其实有大大的学问,可能与字体相关的很多知识都偏设计,不过俗话说技多不压身,艺高人胆大,多了解了解总归没错。就 Web 常用的一些字体而言,经常听说的字体类型,大致可以分为这几种

css3 自定义字体_使用@font-face方式实现个性化字体

当我们在浏览一些网站时发现,里面含有一些十分个性的字体,这些字体并不是我们电脑上安装的字体。那么css是如何实现自定义字体的呢?在css3中可以通过@font-face模块,把自己定义的Web字体嵌入到你的网页。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全