CSS字体

原创 2015年11月17日 22:03:49

字体系列

在 CSS 中,有两种不同类型的字体系列名称:

通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或"Monospace")

特定字体系列 - 具体的字体系列(比如 "Times" 或"Courier")

 

除了各种特定字体系列外(如 Times、Verdana、Helvetica 或 Arial),CSS 还定义了 5 种通用字体系列:

Serif字体

这些字体成比例,而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度,则成该字符是成比例的。例如,小写 i 和小写 m 的宽度就不同。上下短线是每个字符笔划末端的装饰,比如小写 l 顶部和底部的短线,或大写 A 两条腿底部的短线。Serif 字体的例子包括 Times、Georgia 和 New CenturySchoolbook。

Sans-serif字体

这些字体是成比例的,而且没有上下短线。Sans-serif字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。

Monospace字体

Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出,甚至更老式的视频显示终端。采用这些字体,每个字符的宽度都必须完全相同,所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线,也可能没有。如果一个字体的字符宽度完全相同,则归类为 Monospace 字体,而不论是否有上下短线。Monospace字体的例子包括 Courier、Courier New 和 Andale Mono。

Cursive字体

这些字体试图模仿人的手写体。通常,它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如,大写 A 再其左腿底部可能有一个小弯,或者完全由花体部分和小的弯曲部分组成。Cursive 字体的例子包括 ZapfChancery、Author 和 Comic Sans。

Fantasy字体

这些字体包含某种风格的装饰性字体,那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。这样的字体包括 Western、Woodblock 和 Klingon。


font-family属性(即创建一个首选字体列表)可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。


提示:使用逗号分割每个值,并始终提供一个类族名称作为最后的选择。

 

只有当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。例如:

p{

font-family:”Emblema One”,san-serif;

}


字体风格

font-style 属性最常用于规定斜体文本。


该属性有三个值:

normal - 文本正常显示

italic - 文本斜体显示

oblique - 文本倾斜显示

 

斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。

 

字体变形

font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

 

字体加粗

font-weight 属性设置文本的粗细,使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而700 等价于 bold,如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。

 

字体大小

font-size 属性设置文本的大小。


font-size 值可以是绝对或相对值。

绝对值:

将文本设置为指定的大小

不允许用户在所有浏览器中改变文本大小(不利于可用性)

绝对大小在确定了输出的物理尺寸时很有用

相对大小:

相对于周围的元素来设置大小

允许用户在浏览器改变文本大小

 

如果没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。


使用像素来设置字体大小

通过像素设置文本大小,可以对文本大小进行完全控制

使用em来设置字体大小

1em 等于当前的字体尺寸。浏览器中默认的文本大小是 16 像素,如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。

 结合使用百分比和em

在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值

 

CSS 字体属性

属性

描述

font

简写属性。作用是把所有针对字体的属性设置在一个声明中。

font-family

设置字体系列。

font-size

设置字体的尺寸。

font-size-adjust

当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)

font-stretch

对字体进行水平拉伸。(CSS2.1 已删除该属性。)

font-style

设置字体风格(正常或倾斜)。

font-variant

以小型大写字体或者正常字体显示文本。

font-weight

设置字体的粗细。

 

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS3——字体font

代码块 字体属性 1.字体font-family 最好提供多种字体类型,若浏览器不能正确获取,可自动选择后一种字体类型2.

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

font:12px/1.5 arial,\5b8b\4f53,sans-serif 什么意思    字体:字体大小/字体行高 字体格式 在CSS中使用中文字体通常直接设置字体名称,比如设置字体...
  • zuo_hy
  • zuo_hy
  • 2013-10-15 10:57
  • 3311

CSS样式中字体大小,建议font-size使用em

转自:http://blog.csdn.net/u010874036/article/details/51582241 在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参...

CSS3:图标字体

1.图标字体:就是用字体代替图片 1)如:淘宝https://www.taobao.com/ (1)默认:(font-size:12px;) (2)审查代码,看到font-size默认为12px ...

CSS样式(背景、文本、字体)学习笔记

仅仅是自己对着W3CSchool整理的一些 CSS 基础知识点,敲一遍加深下印象也方便以后复习。 CSS背景 背景色 使用background-color属性为元素设置背景色 例如...

CSS(颜色_字体)

颜色样式十六进制十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。 所有浏览器都支持十六进制...

CSS——Fonts(字体)

所有CSS字体属性font 在一个声明中设置所有的字体属性 font-family 指定文本的字体系列 font-size 指定文本的字体大小 font-st...

手机端页面时,字体的显示大小与在CSS中指定的大小不一致

最近在做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致。大家可以查看这个Demo(记得打开Chrome DevTools)。 就如上图所示,你可以发现,...

css中font-family的中文字体

最常用的基本有三种类型: 1、直接中文; 2、英文形式; 3、unicode码; Unicode(统一码、万国码、单一码)是一种在计算机上使用的字符编码。它为每种语言中的每个字...

CSS,font-family,好看常用的中文字体

CSS,font-family,好看常用的中文字体
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)