3-17. font字体相关属性

作者: 一Left一 | 来源:发表于2017-11-14 22:02 被阅读39次

CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。

1、font-style 属性,字体风格,最常用于规定斜体文本。

  • normal - 文本正常显示
  • italic - 文本斜体显示
  • oblique - 文本倾斜显示
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

快捷键

  • fs font-style: italic;
  • fsn font-style: normal;

2、font-weight 属性,字体粗细,设置文本的粗细。

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

快捷键

  • fw font-weight:;
  • fwb font-weight: bold;
  • fwbr font-weight: bolder;

3、font-size 属性
,字体大小,设置文本的大小。
注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。
使用像素来设置字体大小
font-size:60px;

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

像素转换公式为 em:pixels/16=em
h1 {font-size:3.75em;} /* 60px/16=3.75em */
结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值:

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

4、font-family 属性
,指定字体系列,定义文本的字体系列。
注意点:

  • 如果取值是中文, 需要用双引号或者单引号括起来
  • 设置的字体必须是用户电脑里面已经安装的字体
    快捷键:ff font-family:;
    格式:font-family:"楷体";
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p{
          /* font-style:
            取值: italic 倾斜 , normal 正常
            快捷键
            fs:font-style: italic;
            fsn:font-style: normal;
            */
          font-style: italic;

            /*
            font-weight:
            快捷键:
            fw: font-weight:;
            */
          font-weight: bold;

          /*    font-size: 字号
             快捷键:
             fsz: font-size:
             fsz12:font-size: 12px;
             */
          font-size:20px;
          /*
           font-family: 字体 备选字体1 备选字体2
           指定的字体如果没有安装在电脑上,就默认使用宋体
          */
          font-family: "楷体" ;
      }
    </style>
</head>
<body>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
图片.png

5、字体属性的简写
缩写格式:font: style weight size family;
size family 不可省略,不可颠倒顺序,必须放在最后
style weight 可以省略,可以调整顺序

相关文章

  • 3-17. font字体相关属性

    CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。 1、font-style...

  • 前端课程笔记(二):CSS

    字体相关属性 font-family font-size font-style font-weight font ...

  • css--字体(font-size/font-family/图标

    字体的属性 与font-size相关的单位 字体族 font-family font-family用于指定字体的类...

  • 01-24css常用属性

    1.文本相关属性font-size 字体大小font-family 字体名font-weight:100-900 ...

  • 01-24 css常用属性

    1.文本相关属性font-size 字体大小font-family 字体名font-weight:100-900 ...

  • Day04-CSS属性

    1.文本相关属性 字体大小:font-size 字体颜色:color 字体名:font-family 文字加粗:f...

  • 第8天

    字体属性1.字体属性:font-family2.修改字体大小:font-size3.字体风格:font-style...

  • css中的继承属性和非继承属性

    继承属性 字体系列属性font:组合字体font-family:规定元素的字体系列font-weight:设置字体...

  • CSS-font属性

    CSS的属性和值 font属性 font-family 设置字体 font-size 字体大小 font-we...

  • 3.字体样式-CSS基础

    一、字体样式 1.常用的字体样式属性 属性说明font-family字体类型font-size字体大小font-w...

网友评论

    本文标题:3-17. font字体相关属性

    本文链接:https://www.haomeiwen.com/subject/bdtbmxtx.html