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> ...
随机推荐
- AsEnumrable和AsQueryable的区别
http://www.cnblogs.com/jianglan/archive/2011/08/11/2135023.html 在写LINQ语句的时候,往往会看到.AsEnumerable() 和 . ...
- R教程计划
提起数据挖掘,似乎会有很多人望而却步,从生产规划到到规律分析,从生物医学到航天科技,到处都有数据挖掘工程师留下的影子. 通过对比SAS,SPSS,以及R,最终选定了R, 不为什么,免费且高效才是硬道理 ...
- cmake编译Debug和Release
CMake 中有一个变量 CMAKE_BUILD_TYPE ,可以的取值是 Debug Release Rel WithDebInfo 和 MinSizeRel.当这个变量值为 Debug 的时候,C ...
- 关于BitmapFactory.decodeStream(is)方法无法正常解码为Bitmap对象的解决方法
在android sdk 1.6版本API帮助文档中,其中关于BitmapFactory.decodeFactory.decodeStream(InputStream is)的帮助文档是这么说明的: ...
- 缓存一致性(Cache Coherency)入门(转)
参考原文:http://fgiesen.wordpress.com/2014/07/07/cache-coherency/ 本文是RAD Game Tools程序员Fabian “ryg” Giese ...
- 【CF689D Friends and Subsequences】二分搜索,区间查询
题意:给定两个整数序列a,b,将a,b对齐,问有多少个区间满足a的区间内最大值等于b的区间内最小值. 数据范围:区间长度n属于[1, 200000],序列中的元素在整型范围内 思路:枚举所有n*(n+ ...
- C# 二叉堆
二叉堆数据结构讲解: http://www.cnblogs.com/yc_sunniwell/archive/2010/06/28/1766751.html C#代码实现 using System ...
- DM6437 dsp系列之启动过程全析(2)—AIS文件解析
本文均属自己阅读源码的点滴总结,转账请注明出处谢谢. 欢迎和大家交流.qq:1037701636 email: gzzaigcn2009@163.com,gzzaigcn2012@gmail.com ...
- NTP配置实践
前言 NTP(Network Time Protocol,网络时间协议)是用来使网络中的各个计算机时间同步的一种协议.不管是平时使用的私人计算机还是在工作中搭建的服务器集群.时间的统一性和准确性是十分 ...
- [Javascript]3. Improve you speed! Performance Tips
/** Let inheritance help with memory efficiency */ function SignalFire(ID, startingLogs){ this.fireI ...