@font-face

问题描述：

产品展示的界面上有个产品编号，由后台程序动态生成，如图

而"875"的字体是特殊字体，如果客户端系统上没有安装该特殊字体，就达不到原设计效果。

解决办法(我认为的三种)：
1。通过FLASH实现，但是小小的几个数字用FLASH来做不是很划算，
2。用小图标，在后台添加产品的时候顺序上传一张该产品的编号图标。
3。通过字体文件映射到客户端系统来实现

主要通过@font-face，解释如下：

@font-face { font-family : name ; src : url( url ) ; sRules }
设置嵌入HTML文档的字体。
嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。

示例字体：11PXBUS.ttf

步骤：
(1)服务器端先安装"11PXBUS.ttf”字体.
(2)通过Microsoft的"Microsoft WEFT”工具生成" .eot " 的字体(貌似不是每种字体都能生成，而且有的生成的eot文件太大),

这里我通过"11PXBUS.ttf”字体生成了"11PXBUS.eot".

(3)在CSS中自定义字体("11PXBUS.eot"字体和生成的"11PXBUS.ttf"在images文件夹中)
@font-face{
    font-family:myfont1;
    font-weight: bold;
    src: url(../images/11PXBUS.eot);
}
@font-face{
    font-family:myfont2;
    font-weight: bold;
    src: url(../images/11PXBUS.ttf);
}

(4)需要用到特殊字体的地方调用
#content{font-family:"myfont1","myfont2";}

这样客户端没有装这个字体的时候，就可以自动映射对应的字体。

这里定义了两个字体，myfont1是为了兼容IE6、7、8，myfont2兼容FF3.5等，具体看下图支持情况

.eot格式：

.ttf格式：

图片来源：http://www.web600.net/

附：FF不显示设置的字体：
FireFox-->工具-->选项-->内容-->点选“字体&颜色”旁边的“高级”-->勾选“允许页面选择字体而无需使用上面的设置”

转载于:https://www.cnblogs.com/_dragon/archive/2010/04/29/1723916.html

@font-face相关推荐

火狐自定义字体失败 downloadable font: no supported format found
Bootstrap+AdminLTE搭起来的服务,突然字体图标都访问不了了,报错如下: 解决办法1:FontAwesome官网找解决办法,不引用本地的css,直接引用官网建议的地址 <scrip ...
Flutter中集成Font Awesome
1.添加引用在 pubspec.yaml文件中,加入 font awesome的引用 1 dependencies: 2 flutter: 3 sdk: flutter 4 5 # The foll ...
CSS文字文本样式（font字体、css外观属性）
1. font字体 1.1. font-size:大小作用:font-size属性用于设置字号. p { font-size:20px; } 单位: 可以使用相对长度单位,也可以使用绝对长度单位. ...
html页面调用ico图标,如何在HTML中使用图标字体 - icon font?
日期:2012-8-27 来源:GBin1.com 在线演示本地下载主要特性使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小自由的修改颜色添加阴影 ...
html编写的过程中，为什么font设置属性的时候，第二个属性不起作用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
RuntimeWarning:Glyph 21435 missing from current font.
RuntimeWarning:Glyph 21435 missing from current font. 目录 RuntimeWarning:Glyph 21435 missing from cur ...
Bitmap Font 报错“characters from the file are not available in the font”解决办法
出现这种情况的主要原因是因为Bitmap Font中设置的字体编码格式与TXT文本的编码格式不一致,知道原因,问题就迎刃而解了方法一:√ Bitmap默认编码格式为Unicode,将TXT文本编码也 ...
Font from origin 'http://apps.bdimg.com' has been blocked
1.1.1 现象原来使用百度CDN上的bootstrap 3.0.3,升级到3.3.4后即出现如下错误: Font from origin 'http://apps.bdimg.com' has b ...
Css Font 详细研究
2019独角兽企业重金招聘Python工程师标准>>> 在设计自己博客主页的时候想修改下字体,结果发现自己对字体(css font)的了解只是一知半解,属于翻书医生的水平,呵呵.就细 ...
给网页图标字体 Font Awesome 添加动画效果
在国外网站中使用Web字体已经流行起来,虽然使用中文不太靠谱,但我们可以使用图标字体,也是很是方便的,图标字体有很多,可看<30个免费网页图标字体以及使用方法>一文,其中Font Awes ...

@font-face

@font-face相关推荐

最新文章

热门文章