网站上一些字体可能不是默认的通过@font-face可以加载自己特定的字体从而来实现特定的文字效果

1、定义一个自定义字体：

@font-face {font-family: 'iconfont';/*声明一个名为iconfont的字体变量*/src: url('../font/iconfont.eot');src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),url('../font/iconfont.woff2') format('woff2'),url('../font/iconfont.woff') format('woff'),url('../font/iconfont.ttf') format('truetype'),url('../font/iconfont.svg#iconfont') format('svg');
}

font-family属性：字体名称自定义
url属性：自定义字体在当前服务器的位置(可填相对路径和绝对路径)
format属性：字体的格式主要用于浏览器识别
通常有以下几种：truetype opentype truetype-aat embedded-opentype avg等

TrueType格式(.ttf)
Windows和Mac上常见的字体格式这是一种原始格式因此并没有为网页进行优化处理
浏览器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+

OpenType格式(.otf)
以TrueType为基础也是一种原始格式但提供了更多的功能
浏览器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+

Web Open Font格式(.woff)
针对网页进行特殊优化因此是Web字体中的最佳格式
它是一个开放的TrueType/OpenType的压缩版同时支持元数据包的分离
浏览器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+

Embedded Open Type格式(.eot)
IE专用字体格式可以从TrueType格式创建此格式字体
浏览器支持：IE4+

SVG格式(.svg)
基于SVG字体渲染的格式
浏览器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

2、引入自定义字体：

font-family: "iconfont"

引入的时候 font-family的值必须互相对应 才能找到定义的自定义字体

CSS自定义字体@font-face：使用方法及format属性相关推荐

html / CSS 自定义字体font 自己设置好看的特效字体
这篇文章的主题是CSS3属性 : @font-face 楼主很喜欢CSS3的一些新增属性,给我们前端程序员带来了非常很多福利,我们的页面也可以做的更加的美观. 直接放效果图吧,因为代码较长,放在最下面 ...
css字压,CSS自定义字体的实现，前端实现字体压缩
CSS 自定义字体移动端如何兼容UI给的字体 [toc] 移动端的默认字体 IOS 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue And ...
css 自定义字体 Internet Explorer,Firefox,Opera,Safari
FROM: https://developer.mozilla.org/ja/CSS/@font-face http://nicewebtype.com/notes/2009/10/30/how-to ...
css自定义字体转换工具_5种最佳CSS3字体工具
css自定义字体转换工具自从将图形支持添加到浏览器以来,字体在网络上产生了最戏剧性的视觉影响. 几年前,不可能找到使用Arial,Verdana,Tahoma,Times New Roman或Geo ...
自定义字体样式引入使用方法、文本阴影、边框阴影、（边框）圆角、渐变、理解重绘与回流、渐进增强和优雅降级的区别
目录 1.文本阴影 text-shadow 2.边框阴影 box-shadow 3.自定义字体样式方法引入与使用方法举例: 4.(边框)圆角 5.渐变 6.过渡 transition 7.理论知识 ...
汽车之家 css自定义字体反爬解析
本文主要是通过哦爬取汽车之家论坛一些用户热门精华帖子,介绍利用前端页面自定义字体的方式来实现反爬的技术手段,来实践破解它. 自定义字体:@font-face是CSS3中的一个模块,主要是实现将自定义的 ...
CSS @font-face(CSS 自定义字体)
转载自:http://www.2cto.com/kf/201312/265179.html @font-face可以实现从服务器端加载字体,所有浏览器中使用的字体就可以不受本地字体的限制.@font- ...
CSS 自定义字体样式
作为前端,如果UI设计师给的psd设计图中的文字字体我们电脑中没有(电脑没有自带),如何让这种字体在客户的浏览器中正常显示呢?以前前端程序员是将文字截图直接放入页面(这种方式修改文字内容的话很不方便) ...
html字体整体偏移,CSS自定义字体垂直偏移(错误？)
ScottS.. 5 你可能没有做错任何事情.以下是一些可能适用的要点,有些可以由您控制,有些则不可以. 只是为了确定,明确设置vertical-align: baseline. 不同的文件(.eof ...

CSS自定义字体@font-face：使用方法及format属性

网站上一些字体可能不是默认的通过@font-face可以加载自己特定的字体从而来实现特定的文字效果

1、定义一个自定义字体：

2、引入自定义字体：

CSS自定义字体@font-face：使用方法及format属性相关推荐

最新文章

热门文章

CSS自定义字体@font-face：使用方法及format属性

网站上一些字体可能不是默认的 通过@font-face可以加载自己特定的字体 从而来实现特定的文字效果

1、定义一个自定义字体：

2、引入自定义字体：

CSS自定义字体@font-face：使用方法及format属性相关推荐

最新文章

热门文章

网站上一些字体可能不是默认的通过@font-face可以加载自己特定的字体从而来实现特定的文字效果