随笔 - 59, 文章 - 7, 评论 - 30, 阅读 - 33万
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

字体系列及 css中的font设置

Posted on   峰雪  阅读(10211)  评论(1编辑  收藏  举报

CSS 定义了 5 种通用字体系列

  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体
Serif 字体
这些字体成比例,而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度,则成该字符是成比例的。例如,小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰,比如小写 l 顶部和底部的短线,或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook。
Sans-serif 字体
这些字体是成比例的,而且没有上下短线。Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
Monospace 字体s
Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出,甚至更老式的视频显示终端。采用这些字体,每个字符的宽度都必须完全相 同,所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线,也可能没有。如果一个字体的字符宽度完全相同,则归类为 Monospace 字体,而不论是否有上下短线。Monospace 字体的例子包括 Courier、Courier New 和 Andale Mono。
Cursive 字体
这些字体试图模仿人的手写体。通常,它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如,大写 A 再其左腿底部可能有一个小弯,或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 Zapf Chancery、Author 和 Comic Sans。
Fantasy 字体
这些字体无法用任何特征来定义,只有一点是确定的,那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。

理论上讲,用户安装的任何字体系列都会落入到上述某种通用系列中,但实际上可能并非如此,不过例外情况(如果有的话)往往很少。s

-----------以上引自W3School

 

西方国家字母体系分为两类:serif以及sans serif。   

serif是有衬线字体,意思是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。相反的,sans serif就没有这些额外的装饰,而且笔画的粗细差不多。   

serif字体容易识别,它强调了每个字母笔画的开始和结束,因此易读性比较高,sans serif则比较醒目。在走文阅读的情况下,适合适用serif字体进行排版,易于换行阅读的识别性,避免发生行间的阅读错误。   

sans serif强调每一个字母,serif更强调于一个单词。   

中文字体中的宋体就是一种最标准的serif字体,衬线的特征非常明显。字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体之一。不过由于强调横竖笔画的对比,在远处观看的时候横线就被弱化,导致识别性的下降 。

----------以上引自百度百科

sans serif(非衬线字体)更适合于作为标题,强调,

serif(衬线字体)更适合于正文。

------------

具体哪些字体是sans serif(非衬线字体),哪些字体是serif(衬线字体),在dreamweaver的CSS提示框中可以查到,其他的上网搜索。

------------

引自QQ.com的CSS如下

body{margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"宋体","Arial Narrow",HELVETICA;background:#fff;}

不难看出,字体大小:12像素,行高22像素,字体:宋体,Arial,Narrow,helvetica

 

引自taobao.com的CSS如下

body{font:12px/1.5 tahoma,arial,\5b8b\4f53;}

这段CSS的意思为:字体大小:12像素,行高1.5倍,即150%,1.5*12=18像素,字体:tahoma,arial,\5b8b\4f53,这里的\5b8b\4f53是汉字"宋体"的Unicode编码,不采用 SimSun的原因是 Firefox 的某些版本和 Opera 不支持 SimSun 的写法。

 

font的缩写方式,可按以下依次顺序进行编写s

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family
p.ex1{ font:italic arial,sans-serif; }
p.ex2
{ font:italic bold 12px/20px arial,sans-serif; }


字体英文,unicode对照表

平台

中文名

英文名

Unicode

Unicode 2

Windows

新细明体

PMingLiU

\65B0\7EC6\660E\4F53

&#x65B0;&#x7EC6;&#x660E;&#x4F53;

细明体

MingLiU

\7EC6\660E\4F53

&#x7EC6;&#x660E;&#x4F53;

标楷体

DFKai-SB

\6807\6977\4F53

&#x6807;&#x6977;&#x4F53;

黑体

SimHei

\9ED1\4F53

&#x9ED1;&#x4F53;

宋体

SimSun

\5B8B\4F53

&#x5B8B;&#x4F53;

新宋体

NSimSun

\65B0\5B8B\4F53

&#x65B0;&#x5B8B;&#x4F53;

仿宋

FangSong

\4EFF\5B8B

&#x4EFF;&#x5B8B;

楷体

KaiTi         

\6977\4F53

&#x6977;&#x4F53;

仿宋_GB2312

FangSong_GB2312

\4EFF\5B8B_GB2312

&#x4EFF;&#x5B8B;_GB2312;

楷体_GB2312

KaiTi_GB2312

\6977\4F53_GB2312

&#x6977;&#x4F53;_GB2312;

微软正黑体

Microsoft JhengHei

\5FAE\x8F6F\6B63\9ED1\4F53

&#x5FAE;&#x8F6F;&#x6B63;&#x9ED1;&#x4F53;

微软雅黑

Microsoft YaHei

\5FAE\8F6F\96C5\9ED1  

&#x5FAE;&#x8F6F;&#x96C5;&#x9ED1;

Mac OS

 

华文细黑

STHeiti Light [STXihei]

\534E\6587\7EC6\9ED1 

&#x534E;&#x6587;&#x7EC6;&#x9ED1;

华文黑体

STHeiti

\534E\6587\9ED1\4F53

&#x534E;&#x6587;&#x9ED1;&#x4F53;

华文楷体

STKaiti

\534E\6587\6977\4F53

&#x534E;&#x6587;&#x6977;&#x4F53;

华文宋体

STSong

\534E\6587\5B8B\4F53 

&#x534E;&#x6587;&#x5B8B;&#x4F53;

华文仿宋

STFangsong

\534E\6587\4EFF\5B8B

&#x534E;&#x6587;&#x4EFF;&#x5B8B;

丽黑 Pro

Pro LiHei Pro Medium

\534E\6587\7EC6\9ED1 Pro

&#x4E3D;&#x9ED1;Pro

丽宋 Pro

LiSong Pro Light

\4E3D\5B8B Pro

&#x4E3D;&#x5B8B; Pro

标楷体

BiauKai

\6807\6977\4F53

&#x6807;&#x6977;&#x4F53;

苹果丽中黑

Apple LiGothic Medium

\82F9\679C\4E3D\4E2D\9ED1

&#x82F9;&#x679C;&#x4E3D;&#x4E2D;&#x9ED1;

苹果丽细宋

Apple LiSung Light

\82F9\679C\4E3D\7EC6\5B8B

&#x82F9;&#x679C;&#x4E3D;&#x7EC6;&#x5B8B;

Office

 

隶书

LiSu 

\96B6\4E66

&#x96B6;&#x4E66;

幼圆

YouYuan

\5E7C\5706

&#x5E7C;&#x5706;

华文细黑

STXihei

\534E\6587\7EC6\9ED1

&#x534E;&#x6587;&#x7EC6;&#x9ED1;


 

编辑推荐:
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列:向量数据库的应用与畅想
· 从问题排查到源码分析:ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
阅读排行:
· ThreeJs-16智慧城市项目(重磅以及未来发展ai)
· .NET 原生驾驭 AI 新基建实战系列(一):向量数据库的应用与畅想
· Ai满嘴顺口溜,想考研?浪费我几个小时
· Browser-use 详细介绍&使用文档
· 软件产品开发中常见的10个问题及处理方法
点击右上角即可分享
微信分享提示