css Font之字体属性的用法笔记

原创 PHP笔记  2017-03-23 17:14  阅读 884 views 次

css字体属性是用来设置文本的字体、大小、风格和文字样式的。

css字体样式属性

  • font:简写属性。
  • font-family:字体系列。
  • font-size:字体的尺寸。
  • font-size-adjust:当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1已删除该属性。)
  • font-stretch:对字体进行水平拉伸。(CSS2.1已删除该属性。)
  • font-style :字体风格。
  • font-variant:以小型大写字体或者正常字体显示文本。
  • font-weight:字体的粗细。

1、css字体系列font-family

在 CSS 中,有通用字体系列和特定字体系列两种不同类型的字体系列, 通用字体系列拥有相似外观的字体系统组合;特定字体系列就是具体的字体系列,比如 "Times" 或 "Courier"。除了各种特定的字体系列外,css定义了 5 种通用字体系列:Serif字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体。一般用font-family 属性来定义文本的字体系列,font-family属性一般会设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

2、字体样式font-style

font-style属性有三个值:normal(正常)、italic(斜体)、oblique(倾斜的文字,和斜体非常类似,但不太支持)

实例:

......
<body>
<style type="text/css">
#a{
font-style:normal;
}
#b{
font-style:italic;
}
#c{
font-style:oblique;
}
</style>
<div id="d">
<h1 id="i">字体样式</h1>
<p id="a">我正常</p>
<p id="b">我是斜体文字</p>
<p id="c">我是倾斜的文字</p>
</div>
</body>
......

运行结果:

 

3、字体大小font-size

font-size属性是用来设置文本的大小的,在网页设计中正确控制文字的大小是很重要的。字体大小的值可以是绝对的,也可以是相对的。

绝对大小是指:不允许用户在所有浏览器中改变文本大小;

相对大小是指:字体相对于周围元素的大小,允许用户在浏览器中改变文字大小。

实例:

......
<body>
<style type="text/css">
#a{
font-size:10px;
}
#b{
font-size:20px;
}
#c{
font-size:30px;
}
</style>
<div id="d">
<h1 id="i">字体大小</h1>
<p id="a">我是10px</p>
<p id="b">我是20px</p>
<p id="c">我是30px</p>
</div>

......

运行结果:

本文地址:https://www.ggbiji.com/css-font.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情