CSS学习3

字体:

Css中有两种不同类型的字体系列

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

5 种通用字体系列:

  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体

各个属性说明:

属性 作用说明 备注
font-family 指定字体系列 代码1*
font-style 指定字体风格 说明1*
font-variant 字体变形 设定小型大写字母(代码2*)
font-weight 字体加粗 关键字 100 ~ 900 为字体指定了 9 级加粗度。数字 400 等价于 normal,而 700 等价于 bold。(代码3*)
font-size 字体大小 可以取绝对值或相对值,如果没有设定,默认大小是16像素 (16px=1em)。(说明2*)

代码1:

body {font-family: sans-serif;}//指定通用字体

h1 {font-family: Georgia;}//可以指定特定字体

h1 {font-family: Georgia, serif;}//可以指定多个,前者优先

p {font-family: Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;}//多词语的情况下,可以使用引号

说明1:font-style属性的三个值

  • normal - 文本正常显示
  • italic - 文本斜体显示
  • oblique - 文本倾斜显示

代码2:

p {font-variant:small-caps;}

代码3:

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

说明2:

  • 可以直接使用像素来设置字体大小。

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

  • 可以使用em 来设置字体大小,1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。

h1 {font-size:3.75em;} /* 60px/16=3.75em /
h2 {font-size:2.5em;} /
40px/16=2.5em /
p {font-size:0.875em;} /
14px/16=0.875em */

  • 可以结合使用百分比和 EM

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,311评论 0 11
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,218评论 1 4
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,197评论 0 1
  • 请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。 如果您觉得这篇文章还...
    MR_LIXP阅读 2,982评论 1 9
  • 为什么要起逗逼篇这个呢,其实不是针对谁,说的就是你!Drupal猎人!! 因为你们到底知不知道他的官网的金刚狼的照...
    郑方方阅读 1,033评论 1 2

友情链接更多精彩内容