|
由：地洞 / 发布于：2012-08-24已聚集：303人围观 如何让客户端在浏览网站时，我们所预设的字体不被替换？我相信这是很多做网站的朋友都想解决的问题，当我们遇到这样的问题时，很多朋友会和我一样，把我们需要的字体做成图片放在网站上。这样在客户端浏览的时候字体就不会被替换。 @font-face是CSS3中的一个模块，他主要是把自定义的Web字体嵌入到你的网页中，使网站不会因为客户端没有预设字体而变形。如果你的网站很注重视觉效果，决对不可以少了@font-face标签。 认识@font-face标签 @font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type) 格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari 3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】 语法： @font-face ：{属性: 取值;} 取值： font-family：设置文本的字体名称。 font-style：设置文本样式。 font-variant：设置文本是否大小写。 font-weight：设置文本的粗细。 font-stretch：设置文本是否横向的拉伸变形。 font-size：设置文本字体大小。 src：设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。 兼容性： .eot格式 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (√)IE6 (×)Firefox 2.0 (×)Chrome 1.0.x (×)Opera 9.63 (×)Safari 3.1 (√)IE7 (×)Firefox 3.0 (×)Chrome 2.0.x (×)Safari 4 (√)IE8 .ttf格式 类型 Internet Explorer Firefox Chrome Opera Safari 版本 (×)IE6 (×)Firefox 2.0 (×)Chrome 1.0.x (×)Opera 9.63 (√)Safari 3.2.1 (×)IE7 (×)Firefox 3.0 (×)Chrome 2.0.x (√)Opera 10 (√)Safari 4 (×)IE8 (√)Firefox 3.5 更多详细介绍请参考： @font-face 在线手册：http://www./manual/css3_0/@font-face.shtml#example 示例（转自百度贴吧）： 基本html结构和图例（我的浏览器默认显示是雅黑的）   现在，我想要这样一个字体效果  但这个字体效果很少存在于一般的电脑上，要显示怎么办呢如下图注意蓝色背景部分的代码  最终效果  由于很多中文字体加载起来有些难度，这里分享二个转换格式的网站： http://www./wizards/ttf2eot.cgi 在线转ttf为eot格式； http://www./fontface/generator强大的在线转ttf为eot、woff等字体格式 |
|
|
