CSS3 @font-face 指定英文网页字体
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体。可能有人要问,使用这种字体,IE兼容性怎么办,那就大错特错了,@font-face甚至向下兼容到IE4,想想看自己的页面上能有自己自定义的字体是一件多么帮的事情啊,现在贴出一点学习过程与大家分享
首先选一款你要用的字体,有免费下载的或者付费购买的(我反正是下免费的),这个demo种我选的是一个叫alex_brush的字体。那么@font-face的语法格式如下:
@font-face {
font-family: 'alex_brushregular';
src: url('fonts/alexbrush-regular-webfont.eot');
src: url('fonts/alexbrush-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/alexbrush-regular-webfont.woff') format('woff'),
url('fonts/alexbrush-regular-webfont.ttf') format('truetype'),
url('fonts/alexbrush-regular-webfont.svg#alex_brushregular') format('svg');
font-weight: normal;
font-style: normal;
}
#alex-brush{
font-family: "alex_brushregular";
font-size: 40px;
}
@font-face里url是你所使用的自定义的字体的文件位置,可以是相对路径也可以是绝对路径,format是字体格式。设置好之后,只要在对应的DOM对象使用就可以了
这里只是教大家如何使用,至于那些字体格式就不一一介绍了,有人说这些个格式的字体我如何全部下载到,通常情况下只有一种,但是浏览器只兼容对应的格式的字体,这个时候就需要使用到第三方软件fontsquirrel。接下来让我们看看这个软件的界面吧

将你所下载的单个字体通过 ADD FONS 按钮上传,上传完成后就会出现上图中绿色的那条状态栏(原谅我比较懒,只传了一张图),然后点击上图右下的蓝色 DOWNLOAD 按钮,点击过后稍微等待,就会讲字体包下载到你的本地,接着将字体放置到代码所写的位置就可以使用啦。

本人亲测IE6+,火狐,谷歌全部兼容,非常好用。如有不对的地方,欢迎指出
CSS3 @font-face 指定英文网页字体的更多相关文章
- 可以尝试用Google Font API来摆脱网页字体的单调 仅仅抛砖引玉
http://www.nowamagic.net/librarys/veda/detail/2513
- Font Combiner – 自定义网页字体和图标生成工具
Font Combiner 是一个功能丰富的 Web 字体生成工具和字体改进工具,提供字距调整.构造子集.各种提示选项和自定义字体字形组合.您可以生成您自己的自定义字体的格式和文件大小. 另外还有成千 ...
- 使用 font-spider 对 webfont 网页字体进行压缩
原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...
- 网页字体在Frontpage2000制作网页中的讲解
运用HTML,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到CSS.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力. ...
- Type.js – 帮助你更好的控制网页字体排版
Type.js 是一款很好的网页字体排版工具.它可以让你使用新的 CSS 属性,在网页上试下更精细的排版控制.设置很简单.上传 type.js 到您的网站,并在你的 HTML 链接中引用.接下来,你就 ...
- javascript怎么获取指定url网页中的内容
javascript怎么获取指定url网页中的内容 一.总结 一句话总结:推荐jquery中ajax,简单方便. 1.js能跨域操作么? javascript出于安全机制不允许跨域操作的. 二.用ph ...
- CSS 网页字体最佳实践
一般在网页的字体设置中,可以将字体分类三类: 系统字体:使用系统自带的字体 兜底字体:当系统字体无法正常使用,而兜底的字体 Emoji 字体:显示网页中的表情字体 为了满足不同平台,以及 Emoji ...
- 利用private font改变PDF文件的字体
利用private font改变PDF文件的字体 前几天做项目,需要使用未安装的字体来改变PDF的文件.以前并没有实现过类似的功能,幸运的是我在网上找到了类似的教程,并成功实现了这个功能. 下面就跟大 ...
- jQuery控制网页字体大小和肤色
在一些网站上经常看到有控制网页肤色和字体大小的功能,接下来,我们将用两个例子来实现这两个功能. 网页字体大小 首先我们在网页中添加一些被控制大小的文字和字体控制的按钮. <!DOCTYPE> ...
随机推荐
- C# 向批处理文件输入字符
先记录个无关标题哒~ 刚刚学习用C#,在用VS进行图形界面编程时,点界面中添加的空间,VS界面右侧会出现该控件的属性页,但是这个属性页并不全, 只列出了部分重要的属性,一开始还以为是没有对应的属性方法 ...
- CoFun 1612 单词分组(容斥)
Description Stan有N个不同的单词,这天,Stan新结交的两个朋友来他这里玩,Stan作为主人,他需要送给他们单词,但由于Stan不能偏心,所以Stan给每个单词一个权值v_i,他需要他 ...
- Win8.1 MSDN各版本下载(64位/32位,简体中文,繁体中文,英文),X86&X64,EN,CHS,CHT
英文64位ed2k://|file|en_windows_8_1_x64_dvd_2707217.iso|3899295744|8E604054013D21209B851E41DC19F6F5|/ 英 ...
- Hdu3487-Play with Chain(伸展树分裂合并)
Problem Description YaoYao is fond of playing his chains. He has a chain containing n diamonds on it ...
- 使用linux系统做路由转发
使用linux系统(PC机)做路由转发 关键字:linux,Fedora,route,iptables,ip_forward 最近做网络实验,在实验过程中需要用到linux的转发功能,但是遇到一些问题 ...
- OSCLI
- AsyncTask 与 对话框显示 view.WindowManager$BadTokenException: Unable to add window…is not valid; is your a
最近遇到一个奇葩的问题,好郁闷 之前也没有仔细看.问题偶尔出现一次.再去查看日志时,出现 view.WindowManager$BadTokenException: Unable to add win ...
- Linux优化,history增加详细历史记录
主要功能: 1, 可以记录哪个ip和时间(精确到秒)以及哪个用户,作了哪些命令 2,最大日志记录增加到4096条 把下面的代码直接粘贴到/etc/profile后面就可以了 #history mo ...
- JSP错题纠错
A:判断学员是否手动安装过Tomcat(练习熟练度) B:使学员了解Tomcat的运行过程 ,浏览器向Web服务器发送请求,Web站点处理请求后,把处理后的结果响应给浏览器 C:Tomcat作为Web ...
- 修改UITextField placeholder Color
[YourtextField setValue:[UIColor colorWithRed:97.0/255.0 green:1.0/255.0 blue:17.0/255.0 alpha:1.0] ...