Opera字体那些事

写css是一件很蛋疼的事儿,更蛋疼的是在于浏览器的兼容。除了旧版本的IE丧心病狂以外,不同浏览器在细节渲染上也总有差别,常常偏离几个px。

Opera作为老牌的浏览器,对于W3C标准支持还是不错的,尽管我从不使用它。让我蛋疼的是:Opera对于字体css的识别存在问题,所以常常看到许多网页在Opera下只能显示出宋体。

下面的两段css,Opera无法识别:

1
#banri { font-family: 微软雅黑;}
1
#banri { font-family: "Microsoft YaHei";}

对于以下css,Opera可以识别

1
body { font-family: 微软雅黑;}

而对于以下css,Opera又无法识别

1
body { font-family: "Microsoft YaHei";}

经过多次尝试得出:Opera支持body标签的中文名称、英文名称,但不可包含空格,加上引号也无效。非body标签仅支持不含空格的英文名称,不支持中文。

想要在Opera中的字体显示与规定一致,除上述条件外,需要将中文名称转换为unicode,演示如下:

1
2
3
4
5
6
.title {
    font: 20px \5FAE\8F6F\96C5\9ED1;
    padding-left: 20px;
    border-left: 7px solid #00A3CF;
    line-height: 30px;
}

下面列举几个常用中文字体名称的unicode:

宋体:\5B8B\4F53
微软雅黑:\5FAE\8F6F\96C5\9ED1
微软正黑体:\5FAE\x8F6F\6B63\9ED1\4F53

需要获取对应字体名称的unicode,可以使用这个工具:http://app.baidu.com/2unicode

评论

  1. 我是老赵
    我是老赵

    你好

    回复
  2. 树

    大触V5

    回复
    1. 树

      opera上字体终于可以是喜闻乐见的雅黑了

      回复
      1. banri
        banri

        变成雅黑就好 PS:树大触不要黑我!

        回复
        1. 树

          怎敢黑大触

          回复
          1. banri
            banri

            测试一下地址……

            回复
            1. 树

              ok了

              回复