@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. 【测试技术】ant里面mapper的详细用法

    ant里面mapper标签是和fileset配合使用的,目的就是把fileset取出的文件名转成指定的样式.其实看懂官方文档后,感觉真心没啥好写的.但是还是写一下把. 1.<mapper typ ...

  2. No enclosing instance of type test8 is accessible. Must qualify the allocation with an enclosing instance of type test8 (e.g. x.new A() where x is an

    在编译一个例子时,结果编译时出现: No enclosing instance of type test8 is accessible. Must qualify the allocation wit ...

  3. LeetCode_Distinct Subsequences

    Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequence ...

  4. 蓝牙芯片NRF51822入门学习1:时间管理

    前言 之前辞职找工作的时候发现,很多公司希望招聘蓝牙技术方面的人才,所以干脆丢开LWIP静下心来学习蓝牙技术.原本以为一两星期能基本学会的,谁知道所选的蓝牙芯片nrf51822是个坑货,坑了我一个月. ...

  5. awk详解

    一.简介 强大的文本分析工具,基于指定规则浏览和抽取信息.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各种分析处理.awk有3个不同版本: awk.nawk和ga ...

  6. 【czy系列赛】czy的后宫6 && bzoj1044 [HAOI2008]木棍分割

    题目描述 众所周知的是丧尸czy有很多妹子(虽然很多但是质量不容乐观QAQ),今天czy把n个妹子排成一行来检阅.但是czy的妹子的质量实在--所以czy看不下去了.检阅了第i个妹子会增加czy a[ ...

  7. Longest Consecutive Sequence 解答

    Question Given an unsorted array of integers, find the length of the longest consecutive elements se ...

  8. 【POJ3006】Dirichlet's Theorem on Arithmetic Progressions(素数筛法)

    简单的暴力筛法就可. #include <iostream> #include <cstring> #include <cmath> #include <cc ...

  9. 《Java程序员面试笔试宝典》之Java变量命名有哪些规则

    在Java语言中,变量名.函数名.数组名统称为标识符,Java语言规定标识符只能由字母(a~z,A~Z).数字(0~9).下划线(_)和$组成,并且标识符的第一个字符必须是字母.下划线或$.此外,标识 ...

  10. nyoj 36 最长公共子序列

    描述 咱们就不拐弯抹角了,如题,需要你做的就是写一个程序,得出最长公共子序列. tip:最长公共子序列也称作最长公共子串(不要求连续),英文缩写为LCS(Longest Common Subseque ...