shutude
小狐狸
小狐狸
  • UID43839
  • 注册日期2014-01-15
  • 最后登录2018-08-01
  • 发帖数4
  • 经验13枚
  • 威望0点
  • 贡献值22点
  • 好评度1点
  • 社区居民
  • 忠实会员
阅读:2012回复:2

关于用样式全局替换字体的疑问以及测试

楼主#
更多 发布于:2014-12-22 14:29
卡饭的 全局雅黑 方法2
英文字体只用了一条CSS,并没有指定粗体的替代文字,貌似会导致渲染出来的有点区别
@font-face {font-family: "Arial";src:local("Microsoft YaHei");}
而用下面这样每个字体2条CSS会和上面效果不一样(把粗体也指定一下,如果这个字体有单独的粗体文件,貌似英文几乎都有)
还有一个问题,我去试试斜体指定和不指定有没有区别!

发现Arial Bold Italic 粗体斜体、Arial Bold粗体、Arial Italic斜体,都是单独的文件
arialbi.ttf   arialbd.ttf  ariali.ttf ,试试看都指定一下
但是有一个问题,雅黑是没有斜体、粗斜体单独文件的
@font-face {font-family: "Arial";src:local("Microsoft YaHei");}
@font-face {font-family: "Arial";font-style:Italic;src:local("Microsoft YaHei Italic");}
这就导致了一个问题:加和不加第二行指定斜体(虽然雅黑没斜体文件),还是有区别的
  • 加上指定斜体,粗体斜体会以雅黑Bold粗体为标准,进行1次斜体计算
  • 如果不指定斜体,粗斜体会会以雅黑为标准,进行粗体和斜体一共2次计算【【【【【【【【【【【【下图是我的测试过程,可以点开大图查看】】】】】】】】】】

    图片:2014-12-22_152215.png



@font-face {font-family: "Arial";src:local("Microsoft YaHei");}
@font-face {font-family: "Arial";font-weight: Bold;src:local("Microsoft YaHei Bold");}
卡饭的帖子还提到一个问题,不过我还没测试这个,看起来有点麻烦
http://bbs.kafan.cn/forum.php?mod=viewthread&tid=1681393&page=11#pid30631292
需要注意的是,firefox 对 Bold 和 bold 渲染又不同,彻底蛋疼。。。,比较安全和通用的做法是用 font-weight: Bold

 并且还需要注意,某些字体的 Bold 不一定是 标准 700 值,所以调用 Bold 无效,需要用 font-weight 指定范围 100-900
【【【【【【【【【【【【下图是我的测试过程,可以点开大图查看】】】】】】】】】】

图片:2014-12-22_141403.png

最新喜欢:

leitwolfleitwo...
shutude
小狐狸
小狐狸
  • UID43839
  • 注册日期2014-01-15
  • 最后登录2018-08-01
  • 发帖数4
  • 经验13枚
  • 威望0点
  • 贡献值22点
  • 好评度1点
  • 社区居民
  • 忠实会员
1楼#
发布于:2014-12-22 14:37
另外,全具替换字体需要注意的一点,有些网页,某些人写代码会直把字体名字写成中文 ,比如直接写  宋体

所以,别忘了单独添加这种的,记得粗体也要添加,加和不加这行,字体显示的效果完全不一样
@font-face {font-family: "宋体";src:local("Microsoft YaHei");}
@font-face {font-family: "宋体";font-weight: Bold;src:local("Microsoft YaHei Bold");}

如果再遇到类似的情况,自己加吧,比如楷体、新宋体等等
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2025-04-23
  • 发帖数2783
  • 经验595枚
  • 威望1点
  • 贡献值132点
  • 好评度106点
  • 社区居民
  • 最爱沙发
  • 忠实会员
2楼#
发布于:2014-12-22 18:24
是会影响显示,没指定的粗体就直接用常规体加粗来显示,字体有独立粗体版本的还是要替换下粗体。
游客

返回顶部