@font-face

首先
获取要使用字体的四种文件格式，确保能在主流浏览器中都能正常显示该字体。

.TTF或.OTF，适用于Firefox 3.5、Safari、Opera

.EOT，适用于Internet Explorer 4.0+

.SVG，适用于Chrome、AndRoid、IPhone

.woff，适用于Chrome 6，Firefox3，ie9+，opare11。

woff是最新的web开放字体格式(web open font format)，w3c推荐，主要优势是针对浏览器进行优化，字体文件小。

下面要解决的是如何获取到某种字体的这三种格式文件。一般地，我们在手头上（或在设计资源站点已经找到）有该字体的某种格式文件，最常见的是.TTF 文件，我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站FontsQuirrel或 onlinefontconverter提供的在线字体转换服务获取。这里推荐第一个站点，它允许我们选择需要的字符生成字体文件（在服务的最后一个选项），这样就大大缩减了字体文件的大小，使得本方案更具实用性。

然后
获取到三种格式的字体文件后，下一步要在样式表中声明该字体，并在需要的地方使用该字体。
字体声明如下：

@font-face {font-family: 'emotion';src: url('emotion.eot'); /* IE9*/src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('emotion.woff') format('woff'), /* chrome、firefox */url('emotion.ttf')  format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('emotion.svg#svgFontName') format('svg'); /*  iOS 4.1- */}

例如：

@font-face {  font-family: 'fontNameRegular';  src: url('华康少女文字.eot');  src: local('华康少女文字 Regular'),  local('华康少女文字'),  url('华康少女文字.woff') format('woff'),  url('华康少女文字.ttf') format('truetype'),  url('华康少女文字.svg#华康少女文字') format('svg');
}  body{background-color:#D2CDBE;font-family: "华康少女文字","宋体",sans-serif;
}

css网络字体@font-face相关推荐

css 网络字体的使用
网络字体网络字体意思是除了系统自带的字体之外的特殊字体. 1.网络字体他先是根据你给的地址,先下载到浏览器,然后在应用. 2.字体的格式分别有:ttf,otf,eot,sog,svgz,woff,等 ...
html / CSS 自定义字体font 自己设置好看的特效字体
这篇文章的主题是CSS3属性 : @font-face 楼主很喜欢CSS3的一些新增属性,给我们前端程序员带来了非常很多福利,我们的页面也可以做的更加的美观. 直接放效果图吧,因为代码较长,放在最下面 ...
【前端】CSS基础——字体Font（学习笔记）
W3C标准: 结构:HTML描述页面的结构表现:CSS控制页面中元素的样式行为:JavaScript相应用户操作相关笔记: HTML基础 CSS基本语法 CSS基础-layout CSS基础-f ...
微信小程序css篇----字体(Font)
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站. 一.字体:font.属性在一个声明中设置所有字体属性. 可设置的属性是(按顺序): "fo ...
css 中文文字字体_使用CSS的网络字体
css 中文文字字体 CSS | 网络字体 (CSS | Web fonts) Web fonts allow people to use fonts that are not pre-install ...
CSS属性之字体(Font)
CSS属性之字体(Font) font:[ [ "| || ]? [ / ]? ] 复合属性,各属性见下文. 必须同时包含font-size和font-family,且这两个值顺序不能变, ...
HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转
边框背景图片 1. background-origin:设置背景图片的起始原点 background-origin:border-box;------背景图片从边框开始显示 background-o ...
网络字体(Web font)文件格式及兼容性说明
目前常用的字体格式目前最主要的几种网络字体(web font)格式包括WOFF,SVG,EOT,OTF/TTF. WOFF WOFF是Web Open Font Format几个词的首字母简写.这种 ...
html font设置字号,CSS font-size字体文字大小样式属性
CSS font-size字体文字大小样式属性-字体大小样式篇: 本节DIVCSS5为大家介绍通过CSS样式设置文字字体大小知识,涉及CSS样式单词font-size. 一.设置字体大小CSS单词与语 ...

css网络字体@font-face

@font-face

css网络字体@font-face相关推荐

最新文章

热门文章