@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 指定英文网页字体的更多相关文章

  1. 可以尝试用Google Font API来摆脱网页字体的单调 仅仅抛砖引玉

    http://www.nowamagic.net/librarys/veda/detail/2513

  2. Font Combiner – 自定义网页字体和图标生成工具

    Font Combiner 是一个功能丰富的 Web 字体生成工具和字体改进工具,提供字距调整.构造子集.各种提示选项和自定义字体字形组合.您可以生成您自己的自定义字体的格式和文件大小. 另外还有成千 ...

  3. 使用 font-spider 对 webfont 网页字体进行压缩

    原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...

  4. 网页字体在Frontpage2000制作网页中的讲解

    运用HTML,我们可以对字体的大小及字形进行简单的修改,但要进行统一地控制.创建特殊效果,就必须要用到CSS.它能让您更有效地控制网页外观,并可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力. ...

  5. Type.js – 帮助你更好的控制网页字体排版

    Type.js 是一款很好的网页字体排版工具.它可以让你使用新的 CSS 属性,在网页上试下更精细的排版控制.设置很简单.上传 type.js 到您的网站,并在你的 HTML 链接中引用.接下来,你就 ...

  6. javascript怎么获取指定url网页中的内容

    javascript怎么获取指定url网页中的内容 一.总结 一句话总结:推荐jquery中ajax,简单方便. 1.js能跨域操作么? javascript出于安全机制不允许跨域操作的. 二.用ph ...

  7. CSS 网页字体最佳实践

    一般在网页的字体设置中,可以将字体分类三类: 系统字体:使用系统自带的字体 兜底字体:当系统字体无法正常使用,而兜底的字体 Emoji 字体:显示网页中的表情字体 为了满足不同平台,以及 Emoji ...

  8. 利用private font改变PDF文件的字体

    利用private font改变PDF文件的字体 前几天做项目,需要使用未安装的字体来改变PDF的文件.以前并没有实现过类似的功能,幸运的是我在网上找到了类似的教程,并成功实现了这个功能. 下面就跟大 ...

  9. jQuery控制网页字体大小和肤色

    在一些网站上经常看到有控制网页肤色和字体大小的功能,接下来,我们将用两个例子来实现这两个功能. 网页字体大小 首先我们在网页中添加一些被控制大小的文字和字体控制的按钮. <!DOCTYPE> ...

随机推荐

  1. C# 向批处理文件输入字符

    先记录个无关标题哒~ 刚刚学习用C#,在用VS进行图形界面编程时,点界面中添加的空间,VS界面右侧会出现该控件的属性页,但是这个属性页并不全, 只列出了部分重要的属性,一开始还以为是没有对应的属性方法 ...

  2. CoFun 1612 单词分组(容斥)

    Description Stan有N个不同的单词,这天,Stan新结交的两个朋友来他这里玩,Stan作为主人,他需要送给他们单词,但由于Stan不能偏心,所以Stan给每个单词一个权值v_i,他需要他 ...

  3. Win8.1 MSDN各版本下载(64位/32位,简体中文,繁体中文,英文),X86&X64,EN,CHS,CHT

    英文64位ed2k://|file|en_windows_8_1_x64_dvd_2707217.iso|3899295744|8E604054013D21209B851E41DC19F6F5|/ 英 ...

  4. Hdu3487-Play with Chain(伸展树分裂合并)

    Problem Description YaoYao is fond of playing his chains. He has a chain containing n diamonds on it ...

  5. 使用linux系统做路由转发

    使用linux系统(PC机)做路由转发 关键字:linux,Fedora,route,iptables,ip_forward 最近做网络实验,在实验过程中需要用到linux的转发功能,但是遇到一些问题 ...

  6. OSCLI

  7. AsyncTask 与 对话框显示 view.WindowManager$BadTokenException: Unable to add window…is not valid; is your a

    最近遇到一个奇葩的问题,好郁闷 之前也没有仔细看.问题偶尔出现一次.再去查看日志时,出现 view.WindowManager$BadTokenException: Unable to add win ...

  8. Linux优化,history增加详细历史记录

    主要功能: 1, 可以记录哪个ip和时间(精确到秒)以及哪个用户,作了哪些命令 2,最大日志记录增加到4096条   把下面的代码直接粘贴到/etc/profile后面就可以了 #history mo ...

  9. JSP错题纠错

    A:判断学员是否手动安装过Tomcat(练习熟练度) B:使学员了解Tomcat的运行过程 ,浏览器向Web服务器发送请求,Web站点处理请求后,把处理后的结果响应给浏览器 C:Tomcat作为Web ...

  10. 修改UITextField placeholder Color

    [YourtextField setValue:[UIColor colorWithRed:97.0/255.0 green:1.0/255.0 blue:17.0/255.0 alpha:1.0] ...