07月05, 2016

font-family的配置

概述

CCS属性font-family允许您通过给定一个有先后顺序的,由字体名或者字体族名组成的列表来为选定的元素设置字体。 属性的值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体,或者是通过 @font-face 指定的可以直接下载的字体。

语法

/* 一个字体名和一个通用的字体族名 */
font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* 仅有通用的字体族名 */
font-family: sans-serif;
font-family: serif;
font-family: fantasy;
font-family: cursive;
font-family: monospace;

font-family: inherit

取值

一个字体族的名字。例如"Times" 和 "Helvetica" 都是字体族。字体族名可以包含空格,但包含空格时应该用引号。

通用字体族名是一种备选机制,用于在指定的字体不可用时给出较好的字体。通用字体族名都是关键字,所以不可以加引号。 在列表的末尾应该至少有一个通用字体族名。 以下是该属性可能的取值以及他们的定义。

有效的字体族名

字体族名或者是引号包括的字符串,或者是不含引号的一个或多个合法标识串构成的。这意味着在没有带引号的字体族名的开头是不能使用标点符号字符和数字字符的。

以下声明是正确的

font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

以下声明是不正确的

font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

标准语法

如何阅读 CSS 语法。
[ <family-name> | <generic-family> ]#
where 
<family-name> = <string> | <IDENT>+
<generic-family> = serif | sans-serif | cursive | fantasy | monospace

特殊情况,\5b8b\4f53的意思

\5b8b\4f53的意思是宋体

在IE9会遇见写的DIVCSS网页,文字有时不能垂直居中,究竟IE9 line-height设置文字不能垂直居中原因是什么? IE9不支持line-height原因:中文ie9不支持英文字体,相信大家在IE9看见自己使用line-height设置垂直居中文字不能垂直居中,这是与你设置字体有关,通常大家习惯设置font-family:Arial, Helvetica, sans-serif;

ie9中line-height失效解决方法: 只需设置好字体,添加个宋体即可解决 如CSS代码font-family:Arial, "宋体",Helvetica, sans-serif; 设置字体时候注意,还需设置大家都默认系统自带字体,如黑体,宋体。 在中文IE9中不认英文字体,所以IE9找不到设置中文字体,所以对导致字体上下垂直失效。 试了一下改成:font:12px/1.5 arial,“Sim sun”,helvetica,sans-serif;也可以OK 补充:按着font:12px/1.5 arial,“Sim sun”,helvetica,sans-serif;这个写法,有同学反馈mac下网页的字体由原来默认的细黑体和黑体,被宋体替换,这样浏览的效果很不爽。 解决文字:把"Sim sun" 改成 unicode格式即:\5b8b\4f53。 最后:font:12px/1.5 arial,\5b8b\4f53,helvetica,sans-serif; 整理几个常用字体的unicode表示

  • 新细明体 \65b0\7ec6\660e\4f53
  • 细明体 \7ec6\660e\4f53
  • 标楷体 \6807\6977\4f53
  • 黑体 \9ed1\4f53
  • 宋体 \5b8b\4f53
  • 新宋体 \65b0\5b8b\4f53
  • 仿宋 \4eff\5b8b
  • 楷体 \6977\4f53
  • 仿宋_gb2312 \4eff\5b8b_gb2312

note

不同的字体会有不同的展示。

baidu: font : 14px Arial,Helvetica,sans-serif

so: font-family : 'Source Han Sans','Microsoft YaHei','FZLanTingHei-R','Hei','arial','sans-serif'

  • 各个手机系统有自己的默认字体,且都不支持微软雅黑
  • 如无特殊需求,手机端无需定义中文字体,使用系统默认
  • 英文字体和数字字体可使用 Helvetica ,三种系统都支持

本文链接:http://westpsk.com/post/font_family.html

-- EOF --

Comments