字体（Font） 属性

网络知识大全 • • css教程 • 504 阅读

字体（Font） 属性

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"（样式、大小、粗细、大小尺寸/行高、字体类型）

font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。

注意： line - height属性设置行与行之间的空间。

值 描述
font-style 规定字体样式。参阅：font-style 中可能的值。
font-variant 规定字体异体。参阅：font-variant 中可能的值。
font-weight 规定字体粗细。参阅：font-weight 中可能的值。
font-size/line-height 规定字体尺寸和行高。参阅：font-size 和 line-height 中可能的值。
font-family 规定字体系列。参阅：font-family 中可能的值。
caption 定义被标题控件（比如按钮、下拉列表等）使用的字体。
icon 定义被图标标记使用的字体。
menu 定义被下拉列表使用的字体。
message-box 定义被对话框使用的字体。
small-caption caption 字体的小型版本。
status-bar 定义被窗口状态栏使用的字体。

font-style 属性、font-family 属性、font-size 属性、font-variant 属性、font-weight 属性、@font-face 属性、font-size-adjust 属性、font-stretch 属性

属性 说明 CSS
font 在一个声明中设置所有字体属性 1
font-family 规定文本的字体系列 1
font-size 规定文本的字体尺寸 1
font-style 规定文本的字体样式 1
font-variant 规定文本的字体样式 1
font-weight 规定字体的粗细 1
@font-face 一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体 3
font-size-adjust 为元素规定 aspect 值 3
font-stretch 收缩或拉伸当前的字体系列 3

CSS font-style 属性（字体样式）

{font-style:normal;}
{font-style:italic;}
{font-style:oblique;}

值 描述
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。

CSS font-variant 属性（小型大写字母文本）

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

font-variant 属性主要用于定义小型大写字母文本

{font-variant:normal;}
{font-variant:small-caps;}

值 描述
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。

CSS font-weight 属性（文本的粗细）

font-weight 属性设置文本的粗细

{font-weight:normal;}
{font-weight:lighter;}
{font-weight:bold;}
{font-weight:900;}

值 描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。

CSS font-size 属性（字体大小）

font-size 属性用于设置字体大小。

{font-size:medium;}
{font-size:smaller;}
{font-size:larger;}

{font-size:25px;}
{font-size:200%;}
{font-size:100%;}

值 描述
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
 把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。

默认值：medium。
smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
inherit 规定应该从父元素继承字体尺寸。

CSS font-family 属性（字体类型）

font - family属性指定一个元素的字体。

font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。

{font-family:"Times New Roman",Times,serif;}
{font-family:Arial,Helvetica,sans-serif;}

有两种类型的字体系列名称：

  • family-name - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
  • generic-family - 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace。

使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。

注意： 每个值用逗号分开。

注意: 如果字体名称包含空格，它必须加上引号。在HTML中使用"style"属性时，必须使用单引号。

值 描述
  • family-name
  • generic-family
 用于某个元素的字体族名称或/及类族名称的一个优先表。

默认值：取决于浏览器。
inherit 规定应该从父元素继承字体系列。

CSS3 @font-face 规则

<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}

div
{
font-family:myFirstFont;
}
</style>

注意: Internet Explorer 9 只支持 .eot 格式的字体.

使用 CSS3,网站终于可以使用字体以外的预先选择“合法”字体

@font-face规则，网页设计师再也不必使用的"web-safe"的字体之一。

字体的名称，font - face规则：

  • font-family: myFirstFont;

字体文件包含在您的服务器上的某个地方，参考CSS：

  • src: url('Sansation_Light.ttf')

如果字体文件是在不同的位置，请使用完整的URL：

  • src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')

现在准备使用该字体，下面是如何使用它所有的div元素的一个例子：

div
{
font-family: myFirstFont;
}

语法：

      @font-face
      {

font-properties

    }

以下实例为在div中使用的字体:

div
{
font-family: myFirstFont;
}

 

语法

@font-face
{
font-properties
}
字体描述 值 说明
font-family name 必需的。定义字体的名称。
src URL 必需的。定义该字体下载的网址（S）
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded		 可选。定义该字体应该如何被拉长。默认值是"正常"
font-style normal
italic
oblique		 可选。定义该字体应该是怎样样式。默认值是"正常"
font-weight normal
bold
100
200
300
400
500
600
700
800
900		 可选。定义字体的粗细。默认值是"正常"
unicode-range unicode-range 可选。定义该字体支持Unicode字符的范围。默认值是"ü+0-10 FFFF"

 


CSS line-height 属性

设置以百分比计的行高：.

{line-height:70%;}
{line-height:200%;}
浏览器的默认行高为“100%”

{line-height: 50px}

{line-height: 0.5}
{line-height: 2}
浏览器的默认行高为“1”

注意： 负值是不允许的

值 描述
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

版权声明：
作者：网络知识大全
链接：http://www.maycasi.com/99.html
来源：MAYCASI网络知识大全
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>