美文网首页
CSS font字体属性

CSS font字体属性

作者: 败于化纤 | 来源:发表于2022-11-07 15:58 被阅读0次

字体属性是什么?

  • CSS Fonts 是 CSS 的一个模块
  • 它定义了与字体相关的属性以及如何加载字体资源。
  • 它允许您定义字体的样式,例如:
    • 它的系列、
    • 大小和粗细、行高
    • 以及当多个字符可用于单个字符时要使用的字形变体。

字体属性

平台 中文衬线字体 中文非衬线字体 英文衬线字体 英文非衬线字体
通用字体 serif sans-serif serif sans-serif
window 宋体 微软雅黑 Times arial
Mac 宋体 苹方 San-Francsico
IOS 苹方 英文衬线字体 英文非衬线字体
Andriod 思源黑体 英文衬线字体 英文非衬线字体
其他
说明:字体分为两种:
  • 通用字体系列:它指一系列具有共同风格的字体系列,比如衬线和非衬线
  • 特殊字体:它指某一个字体,比如:微软雅黑 ,苹方,思源黑体

font - family

定义:用于设置字体的外观。
语法:

 body{
            font-family: Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
        }

解析:

 body{
            font-family:中文字体, 苹果中文字体, 中文字体, sans-serif;

        }

语法规则:

  • 可以设置多个字体名称或字体系列名称作为属性值
  • 多个字体名称之间使用逗号隔开
  • 如果字体名称含有特殊字符需要加引号比如:
    • 'Microsoft Yahei' 空格是特殊字符
    • 'sans-serif' 横线也是特殊字符
    • '微软雅黑' 中文也是特殊字符
    • 特殊字体在前,通用字体在后
    • 英文字体在前,中午字体在后

在 CSS 中,有五个通用字体族:

  • 衬线字体(Serif)- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 非衬线字体(Sans-serif)- 字体线条简洁(没有小笔画)。它们营造出现代而简约的外观。
  • 等宽字体(Monospace)- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体(Cursive)- 模仿了人类的笔迹。
  • 幻想字体(Fantasy)- 是装饰性/俏皮的字体。

font-size

定义:页面字体的大小
语法:

body{
font-size:相对值|绝对值;
}

使用相对单位设置 font-size

  • 关键词
  • %
  • em
  • rem
  • vw/vh

使用绝对单位设置font-size

  • px

用法:

  • 在做网页的时候,第一步要确认根字号大小。
html{
font-size:16px;
font-size:62.5%;  /*根字号为十像素*/
}
  • 在设置页面字号的时候,要有字号层级的意识。也就是说你需要确定:
    • 页面中最大的字号:<h1></h1>
    • 页面中最小字号:版权文字,补充说明描述性的文字
    • 正文字号:一般是14像素或者16像素

font-weight属性

定义:用于定义字体的粗细
语法:

body{
font-weight:关键词|数值
}

属性值:
关键词:

  • normal:正常粗细 (对中文有效果)
  • lighter:更细
  • bold:加粗 (对中文有效)
  • bolder:更粗 (效果同bold)

数值:

  • 100 - 900
  • -400:正常粗细
  • 比四百大都是加粗。
  • 比四百小都是变细。

line-height

定义:设置字体行高
语法:

body{
      line-height:数字(没有单位|像素(px)|关键字|百分比;
}

属性值:

  • normal:默认值。表示正常的行高,该值大概是当前的元素的字号的1.4倍左右。
  • 像素(px):使用px设置行高没有灵活性,不会根据字号大小调整。
  • 百分比 :工作原理同像素,不够灵活,不会自动根据字号调整行高。
  • 数字:推荐使用,数字值会根据当前元素的字号自动调整行高。通常建议行高设置在字号的1.2-2倍之间。

行高指两条基线之间的距离
基线指一行文字底部对齐的线,对于英文而言,四线三格本的从上向下的第三条线就是基线

111.png

字符框:在MTML语言中,存在三种看不见的框,这三种框决定元素的高度。

  • 字符框 :字符框由font-size属性决定
  • 行框:行框的高度由行高决定
  • 元素框 :全部行框之和

font-style

定义:用于定义字体风格,字体是否倾斜
语法:

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

属性值:

  • normal:默认值,不倾斜。
  • italic:倾斜 ,表示对字体进行倾斜处理
  • oblique:倾斜 ,表示使用斜体字体显示字符

font-variant

定义:小型大写字母

h1{
font-variant:normil | samll-caps;
}

属性值:

  • normil:默认
  • samll-caps:小型大写字母

line-height

定义:设置字体行高
语法:

body{
      line-height:数字(没有单位|像素(px)|关键字|百分比;
}

属性值:

  • normal:默认值。表示正常的行高,该值大概是当前的元素的字号的1.4倍左右。
  • 像素(px):使用px设置行高没有灵活性,不会根据字号大小调整。
  • 百分比 :工作原理同像素,不够灵活,不会自动根据字号调整行高。
  • 数字:推荐使用,数字值会根据当前元素的字号自动调整行高。通常建议行高设置在字号的1.2-2倍之间。

行高指两条基线之间的距离
基线指一行文字底部对齐的线,对于英文而言,四线三格本的从上向下的第三条线就是基线

111.png

字符框:在MTML语言中,存在三种看不见的框,这三种框决定元素的高度。

  • 字符框 :字符框由font-size属性决定
  • 行框:行框的高度由行高决定
  • 元素框 :全部行框之和

@font-face

  • 属性名单词
    Font:字体
    Face:外观
  • @font-face 定义:用于定义元素的自定义字体
  • 自定义字体?
    自定义字体就是非系统字体,非安全字体
  • 安全字体
    引入非安全字体
  • 语法:
/*css文件*/
@font-face{/*大括号:设置引入规则*/
/*该font-family是规则符,不是属性,用于描述自定义字体的名称。*/
font-family:'自定义字体名称';
/*url:指定自定义字体的文件,可以是相对路径也可以是绝对路径*/
url("自定义字体文件.otf")
}
/*向元素应用自定义字体*/
body{
font-family:"serif";
}

font

字体复合属性:就是把所有的字体属性写在一个声明里面

body{
font:font-style font-weight font-size font-family;
}

注:font-style font-weigh等字体属性必须放在font-size 和 font-family前面
font-size 和 font-family前面的属性值位置随意。

相关文章

  • CSS内联样式的使用,设置字体属性

    1,CSS设置字体名称属性(font-family): 示例: 2,CSS设置字体大小属性(font-size):...

  • CSS-font属性

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

  • CSS字体样式

    1、CSS样式字体属性 font-size:字号大小font-family:设置字体unicode字体 CSS注释...

  • CSS字体(Font) 属性

    CSS字体(Font) 属性: 属性 说明 font 在一个声明中设置所有字体...

  • 2018-06-04

    字体的样式 CSS 属性: 字体样式(Font Style) 1 字体样式 {font:font-style fo...

  • css基础(二)

    css基础 字体属性 font(所有字体属性) font:italic bold 12px/20px arial,...

  • No.8 CSS字体属性、文本属性、背景、界面样式

    一、CSS字体属性 1.CSS字体系列 CSS 使用 font-family 属性定义文本的字体系列。 各种字体之...

  • 整理常用CSS

    字体属性:(font) CSS文字属性: CSS边框空白 CSS符号属性: CSS背景样式: 指定背景位置 CSS...

  • 前端学习之CSS——字体、文本

    css字体属性: 字体大小: CSS 使用 font-size 属性定义字体大小。 语法: px(像素)大小是我们...

  • 【CSS属性大全】

    CSS的文本属性 文本属性-字体风格 font-style:设置字体风格; 常用的属性:normal(常规字体)、...

网友评论

      本文标题:CSS font字体属性

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