css设置各种中文字体如雅黑、黑体、宋体、楷体等等

  发布时间:2014-05-08 15:29:53   作者:佚名   我要评论

这篇文章主要介绍了css如何设置各种中文字体如雅黑、黑体、宋体、楷体等等,需要的朋友可以参考下

复制代码
代码如下:

.selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu }

说明:

加上中文名“微软雅黑”是为了兼容opera。

MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果。

在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名:
Mac OS的一些:

华文细黑:STHeiti Light [STXihei]
华文黑体:STHeiti
华文楷体:STKaiti
华文宋体:STSong
华文仿宋:STFangsong
儷黑 Pro:LiHei Pro Medium
儷宋 Pro:LiSong Pro Light
標楷體:BiauKai
蘋果儷中黑:Apple LiGothic Medium
蘋果儷細宋:Apple LiSung Light
Windows的一些:
新細明體:PMingLiU
細明體:MingLiU
標楷體:DFKai-SB
黑体:SimHei
宋体:SimSun
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
微軟正黑體:Microsoft JhengHei
微软雅黑体:Microsoft YaHei
装Office会生出来的一些:

隶书:LiSu
幼圆:YouYuan
华文细黑:STXihei
华文楷体:STKaiti
华文宋体:STSong
华文中宋:STZhongsong
华文仿宋:STFangsong
方正舒体:FZShuTi
方正姚体:FZYaoti
华文彩云:STCaiyun
华文琥珀:STHupo
华文隶书:STLiti
华文行楷:STXingkai
华文新魏:STXinwei

注:如果字体的名称是一个单词的,不需要加引号,否则在ie6,7里面会失效,并且后面的样式也会不生效!

相关文章

  • css中grid属性的使用详解

    这篇文章主要介绍了css中grid属性的使用详解的相关资料,详细的介绍了grid属性,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-26
  • 纯css实现Material Design中的水滴动画按钮

    这篇文章主要介绍了纯css实现Material Design中的水滴动画按钮的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-26
  • Flexbox 布局的最简单表单的实现

    弹性布局(Flexbox)逐渐流行,越来越多人使用,本文章主要介绍了Flexbox 布局的最简单表单的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过
    2018-10-25
  • 详解关于flex-shrink如何计算的冷知识

    本篇文章给大家带来的内容是关于flex-shrink如何计算?flex-shrink的计算方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助
    2018-10-25
  • 详解flex多列布局遇到的问题和解决方案

    flex布局无疑是简单、易用的,他让我我们的布局更加简单和快速,这篇文章主要介绍了详解flex多列布局遇到的问题和解决方案 ,非常具有实用价值,需要的朋友可以参考下
    2018-10-24
  • 使用css实现物流进度的样式的实例代码

    本文通过实例代码给大家介绍了使用css实现物流进度的样式,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-10-23
  • css实现中间文字两边横线效果

    这篇文章主要介绍了css实现中间文字两边横线效果 ,需要的朋友可以参考下
    2018-10-23
  • CSS设置背景模糊的实现方法

    这篇文章主要介绍了CSS设置背景模糊的实现方法,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-22
  • css实现“加号”效果的实例代码

    这篇文章主要介绍了css实现“加号”效果的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-22
  • css flex几种多列布局

    这篇文章主要介绍了css flex几种多列布局的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-19

最新评论