受欢迎的博客标签

bootstrap3修改默认字体,更换为微软雅黑或其他字体的方法

Published

Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。

默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。

此外,所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

 

bootstrap3修改默认字体,更换为微软雅黑或其他字体的方法 在开发中,使用bootstrap后,中文会一直是默认的宋体,做为一个设计师,是不可忍受的。。。 还是微软雅黑的字体更好看些,而且过度到手机、平板电脑等设备上,字体也不会有太大跳跃。

所以修改bootstrap的默认字体,更换为其他字体,例如:微软雅黑,方法很简单:

正常引入bootstrap的css样式后,记得将自定义的样式表放到其之后,   如:    

<link rel="stylesheet" href="/Public/css/bootstrap.min.css">

<link rel="stylesheet" href="/Public/img/main.css">

在main.css中第一句加上:  

  body,button, input, select, textarea,h1 ,h2, h3, h4, h5, h6 { font-family: Microsoft YaHei,'宋体' , Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;}  

将首选字体替换为微软雅黑,用英文写字体名称兼容性更好,在所有浏览器上都通用,而且兼容bootstrap2.xx版本与最新的bootstrap3版本。

将h1~h6标签写上,是因为在最新的bootstrap3中,对h1~h6单独做了字体设定,而在2.xx版本中则没有,安全起见要覆盖。  

追加:不建议使用 * {}选择器,因为在一些其他样式插件、特殊部分会有更好的字体样式设定,用*就会全部覆盖 CSS,font-family,好看常用的中文字体

例1(小米米官网):

font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;

例2(淘宝技术研发中心):font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;

例3(加网 ):font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;

例4(淘宝UED):font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;

例5(一淘UX):font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif; font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;  

另外: HTML,CSS,font-family:中文字体的英文名称 宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 DFKai-SB仿宋 FangSong楷体 KaiTi仿宋_GB2312 FangSong_GB2312楷体_GB2312 KaiTi_GB2312 宋体:SimSuncss中中文字体(font-family)的英文名称Mac OS的一些:华文细黑:STHeiti Light [STXihei]华文黑体:STHeiti华文楷体:STKaiti华文宋体:STSong华文仿宋:STFangsong儷黑 Pro:LiHei Pro Medium儷宋 Pro:LiSong Pro Light標楷體:BiauKai蘋果儷中黑:Apple LiGothic Medium蘋果儷細宋:Apple LiSung LightWindows的一些:新細明體:PMingLiU細明體:MingLiU標楷體:DFKai-SB黑体:SimHei新宋体: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华文新魏:STXinweiWindows 中的中文字体。在默认情况下,也就是未自行安装新字体或者 Office 等文字处理软件的情况下,Windows 默认提供下列字体:Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312Windows XP/2000/2003/ME/NT 宋体/新宋体、黑体、楷体_GB2312、仿宋_GB2312 (Windows XP SP3 宋体-PUA)Windows Vista/7/2008 宋体/新宋体、黑体、楷体、仿宋、微软雅黑、SimSun-ExtB那么每种字体能显示那些汉字呢?Vista 之前的 Windows 中宋体/新宋体、黑体支持 GBK 1.0 字符集,楷体_GB2312、仿宋_GB2312 支持 GB2312-80 字符集。(注:Windows 3.X 只能支持 GB2312-80 字符集)Vista 及之后的 Windows 中宋体/新宋体、黑体、楷体、仿宋、微软雅黑支持 GB18030-2000 字符集,SimSun-ExtB 只支持 GB18030-2005 字符集扩展 B 部分。下面对字符集进行简单的介绍:GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005GB2312-80 中的字符数量最少,GB18030-2005 字符数量最多。GB2312-80 是最早的版本,字符数比较少;GBK 1.0 中的汉字大致与 Unicode 1.1 中的汉字数量相同;GB18030-2000 中的汉字大致与 Unicode 3.0 中的汉字数量相同,主要增加了扩展 A 部分;GB18030-2005 中的汉字大致与 Unicode 4.1 中的汉字数量相同,主要增加了扩展 B 部分;由于 Unicode 5.2 的发布,估计 GB18030 会在近期发布新版本,增加扩展 C 部分。需要说明的是在 GB18030 中扩展 B 部分并不是强制标准。

如果想查看 GB18030 的标准文本,请访问 http://www.gb168.cn 中的强标阅读。如果想了解 Unicode 的内容,请访问 http://www.unicode.org。

现在纠正网上普遍的一个错误:GB18030-2000 和 GB18030-2005 都不支持单字节的欧元符号与简体中文有关的代吗页如下:936 gb2312 简体中文(GB2312)————其实是GBK10008 x-mac-chinesesimp 简体中文(Mac)20936 x-cp20936 简体中文(GB2312-80)50227 x-cp50227 简体中文(ISO-2022)51936 EUC-CN 简体中文(EUC)52936 hz-gb-2312 简体中文(HZ)54936 GB18030 简体中文(GB18030)补充:使用楷体_GB2312、仿宋_GB2312后,在 Windows 7/Vista/2008 中可能不再显示为对应的字体。这是因为 Windows 7/Vista/2008 中有楷体、仿宋,默认情况下没有楷体_GB2312、仿宋_GB2312,字体名称相差“_GB2312”。 .