CSS @font-face(CSS 自定义字体)

转载自：http://www.2cto.com/kf/201312/265179.html

@font-face可以实现从服务器端加载字体，所有浏览器中使用的字体就可以不受本地字体的限制。@font-face真的不是什么新鲜玩意，早在2001年时就被提出来，只不过近两年才被各浏览器广泛支持。而且各浏览器支持的字体文件格式也可能不同，一般来说如下四种格式可覆盖所有浏览器。

eot：该格式仅在老版本的IE中使用，浏览器兼容性查看http://caniuse.sinaapp.com/html/item/eot/index.html

ttf：(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式,随着windows的流行，已经变成最常用的一种字体文件表示方式，支持的浏览器很多。浏览器兼容性查看http://caniuse.sinaapp.com/html/item/ttf/index.html

svg：(Scalable Vector Graphics)该字体可能最早在IOS设备上被支持，没有ttf格式使用的广泛。浏览器兼容性查看http://caniuse.sinaapp.com/html/item/svg-fonts/index.html

woff：（Web Open Font Format）是一种网页所采用的字体格式标准。此字体格式发展于2009年，现在正由W3C标准化，以求成为web字体的统一标准。浏览器兼容性查看http://caniuse.sinaapp.com/html/item/woff/index.html

如何定义字体不在本文的介绍范围内，可以用一些软件来生成字体文件和各格式之间转换。定制字体需要有非常好的设计基础。

如何使用自定义字体？

第一步，在CSS中引入字体并给名字取一个合适的名字，如下

@font-face {

/* font-properties */

font-family: pictos;

src:url('pictos/pictos-web.woff'),

url('pictos/pictos-web.ttf'),

url('pictos/pictos-web.eot'); /* IE9 */

}

font-family定义字体的名字，接下来的src是加载字体文件的位置，之所有有多个url就是因为浏览器兼容问题。

第二步，使用刚刚定义的字体，如下

div {

font-family: pictos;

}

具体例子请查看http://caniuse.sinaapp.com/html/demos/fontface/index.html.

@font-face的浏览器兼容性请查看http://caniuse.sinaapp.com/html/item/fontface/index.html

CSS @font-face(CSS 自定义字体)相关推荐

CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标作者:大漠日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
vue 使用自定义字体
1.1 引入字体到 Vue 项目 1.1.1 创建字体文件夹在 static 文件夹下创建 font 文件夹.并将下载好的字体拷贝到文件夹下. 1.1.2 创建字体样式文件(CSS) @font-f ...
控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析
元素的显示与隐藏: 常见控制元素的显示和隐藏的属性有display.visibility.overflow,需要清楚的理解三者之间的区别. display显示: 当值为none时为销毁对象,不保留原位 ...
html中css如何引用自定义字体 - 案例篇
html中css引用自定义字体,实现自定义字体样式效果(含案例) 网页中不同的字体,代码是怎么定义的?怎么引用外来字体文件? html 案例 · 代码如下: <!DOCTYPE html> ...
前端React项目的Next.js项目通过CSS引入自定义字体文件
最近在Web3的项目,需要引入自定义字体,做下记录: 1. 如果是下载的字体文件,直接能使用的就不需要转换,如果是TTF格式则需要转换成eot.svg.woff.woff2,这里提供一个网站Font ...
css字体 text,css文本样式text、字体样式font
文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...
html css调用自定义字体,css怎么自定义字体样式？
在CSS中,可以通过@font-face规则来指定一个用于显示文本的自定义字体.@font-face规则允许网页开发者为其网页指定自定义的字体, 通过这种自定义字体的方式,可以消除对用户电脑字体的依赖 ...
svg转css font,svg转font字体方案
在我们做项目的时候,通常会有一些icon图标,如下图: 这些图标,如果不跟设计师说,设计师会给png图.但是视觉规范里面,一般都会对这些图标加一些hover,active态,还会改变大小.如下图: 所 ...
CSS 自定义字体样式
作为前端,如果UI设计师给的psd设计图中的文字字体我们电脑中没有(电脑没有自带),如何让这种字体在客户的浏览器中正常显示呢?以前前端程序员是将文字截图直接放入页面(这种方式修改文字内容的话很不方便) ...

CSS @font-face(CSS 自定义字体)

CSS @font-face(CSS 自定义字体)相关推荐

最新文章

热门文章