• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 关于几个常见的css字体设定问题探讨

关于几个常见的css字体设定问题探讨

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css,字体等相关知识,佚名 希望在学习及工作中可以帮助到您
font:12px/1.5 arial,\5b8b\4f53,sans-serif 什么意思

字体:字体大小/字体行高 字体格式

在CSS中使用中文字体通常直接设置字体名称,比如设置字体为宋体:font-family:’宋体’。但因此产生的一个问题是,如果CSS编码有误,会导致页面加载后CSS中的中文字体乱码

直接使用中文字体,有时候在ie6下会出现样式丢失问题。

而使用英文代替中文如:“font-family:SimSun”也不推荐,Firefox的部分版本与Opera在处理SimSun时会有问题。

所以推荐使用中文字体的Unicode编码。 那怎么解决这个乱码问题呢,由于CSS文件基本都是UTF-8的编码模式,所以我们可以把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。比如中文字体“宋体”经过Unicode编码后为“\5b8b\4f53″,在CSS中就可以这样写:font-family:’ \5b8b\4f53’; 如果在你“DIV+CSS”的过程中,还需要用到一些表中没有的字体的话,可以借助Firefox的插件Firebug来查询所需中文字体对应的Unicode编码,方法很简单,就是打开Firefox,然后打开Firebug,在“控制台”里底部“>>>”的后面像这样输入

escape('黑体');

escape('黑体');

escape('黑体');

escape('黑体');

escape('黑体');

escape('微软雅黑');,然后会显示一个信息,%u5FAE%u8F6F%u96C5%u9ED1这个就是中文字体“微软雅黑”对应的Unicode编码“\5FAE\8F6F\96C5\9ED1”,注意把%u改成\,否则可能会出错。
http://my.csdn.net/uploads/201208/02/1343889041_2779.jpg
巧用Firebug查询中文字体的Unicode编码(Firefox 14.0.1,Firebug 1.10.1)

另外,在设置字体时候最好把英文字体写在前面,不然可能网页里所有的英文字体和数字都变成“宋体”或者别的字体去了,那样看起来比较不美观。例如:font-family:’ \5FAE\8F6F\96C5\9ED1’,Arial;最好像这样写:font-family:’\5FAE\8F6F\96C5\9ED1’,Arial;

为了方便需要的朋友快速使用,下表中列出了一些常用中文字体的Unicode编码: 
宋体 SimSun \5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53
新宋体 NSimSun \65B0\5B8B\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53
细明体 MingLiU \7EC6\660E\4F53
标楷体 DFKai-SB \6807\6977\4F53
仿宋 FangSong \4EFF\5B8B
楷体 KaiTi \6977\4F53
仿宋_GB2312 FangSong_GB2312 \4EFF\5B8B_GB2312
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1
华文黑体 STHeiti \534E\6587\9ED1\4F53
华文楷体 STKaiti \534E\6587\6977\4F53
华文宋体 STSong \534E\6587\5B8B\4F53
华文仿宋 STFangsong \534E\6587\4EFF\5B8B
丽黑 Pro LiHei Pro Medium \4E3D\9ED1 Pro
丽宋 Pro LiSong Pro Light \4E3D\5B8B Pro
标楷体 BiauKai \6807\6977\4F53
苹果丽中黑 Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1
苹果丽细宋 Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B

 
google字体对照:http://hotoo.googlecode.com/svn/trunk/labs/css/css-fonts.html

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-02chrome表单自动填充input黄色背景解决方案
  • 2017-08-06CSS3不透明度实例讲解
  • 2017-08-06CSS写的简单表格示例
  • 2017-08-02css小技巧
  • 2017-08-06利用css @viewport 做设备适配
  • 2017-08-06FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条
  • 2017-08-06用CSS3来实现社交分享按钮
  • 2017-08-06css中关于定位属性position为fixed的使用记载
  • 2017-08-06css移动端实现与pc端一样的:acitve效果
  • 2017-08-06CSS中下拉菜单和表单以及弹出层的简单笔记

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • DIV多层嵌套margin-top的BUG问题
    • CSS如何只改变父元素背景透明度不改变子元素透明度
    • CSS编写时的高性能以及高维护性代码优化建议总结
    • CSS3媒体查询Media Queries基础学习教程
    • css 相对定位 绝对定位 浮动 分析
    • IE6下position fixed失效的解决方法(亲测有效)
    • css 中的background:transparent到底是什么意思有什么作用
    • CSS3支持IE6, 7, and 8的边框border属性
    • 给DIV添加滚动条的实现代码
    • 纯CSS改变webkit内核浏览器的滚动条样式

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有