@Font

日期:2021-03-21 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

@Font-face基础详细介绍:

@font-face 是1个css2的1个英语的语法,它容许你在网页页面上显示信息1个自定的字体样式。即便顾客设备上能够沒有安裝这类字体样式,网页页面还可以显示信息。

本文将详细介绍@font-face的基础用法,和在全部访问器都能应用的方式。

@Font-face基础英语的语法:

@font-face { font-family: <a-remote-font-name>; src: <source> [,<source>]*; [font-weight: <weight>]; [font-style: <style>]; }

实际详细介绍请移步到这里:https://developer.mozilla.org/en/css/@font-face

1个事例:

@font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; }

font-family是字体样式的名字,src是字体样式的相对路径,能够是顾客本机字体样式,还可以是服务器上的字体样式。

@Font-face现阶段访问器的适配性:

•Webkit/Safari(3.2+):TrueType/OpenType TT (.ttf) 、OpenType PS (.otf);
•Opera (10+): TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg);
•Internet Explorer: 自ie4刚开始,适用EOT文件格式的字体样式文档;ie9适用WOFF;
•Firefox(3.5+): TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)
•Google Chrome:TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6
由上面能够得出:.eot + .ttf /.otf + svg + woff = 全部访问器的完善适用。

@Font-face 让全部访问器都适配的方式:

有1个专业用于@font-face 的字体样式网站:http://www.fontsquirrel.com/fontface/generator

fontsquirrel 网站出示了1个完全免费的 @font-face Kit Generator专用工具,能够转化成不一样的字体样式文件格式,而且立即用css和html得出demo。使你能够立即引入到你的网站上。你能够立即应用 fontsquirrel 网站出示 的1些字体样式,还可以提交你自身的字体样式還是用。

@font-face Kit Generator demo
http://www.xunzou.com/demo/font-face/Chopin-Script-fontfacekit/demo.html
@font-face Kit Generator demo
http://www.font2web.com/

@font-face demo
http://www.xunzou.com/demo/font-face/font-face.html

其它font服务:
Google font API,也是1个非常好的字体样式服务,此外1些字体样式更换也有cufon等。
Google font API 能够参照以前的1片文章内容:http://www.xunzou.com/blog/post/619.html