CSS字体属性(font-family、font-size、font-weight、font-style)

心已赠人 2022-12-16 13:24 225阅读 0赞

### CSS字体属性 ###

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式。

### 字体系列 ###

CSS使用font-family属性定义文本的字体系列。

p { font-family:"微软雅黑";}
    div {font-family:Arial,"Microsoft Yahei","微软雅黑";}

各种字体间用英文英文状态下的逗号隔开。如果是用空格隔开的多个单词组成的字体，需要加引号。尽量使用系统自带的字体，保证在任何用户的浏览器中都能够正常显示。首先显示第一种字体，电脑没有第一种字体会显示第二种字体，以此类推，如果都没有则显示默认字体。

### 字体大小 ###

CSS使用font-size属性定义字体大小。

p {
    	font-size: 20px;
    }

px:像素，是网页中最常用的单位，谷歌浏览器的字体默认显示为16px，不同的浏览器默认字体大小可能不同。可以给<body>标签设置字体大小。

标题标签比较特殊，需要单独设置大小

### 字体粗细 ###

CSS使用font-weight属性设置文本字体的粗细。

p {
    	font-weight:700;
    }

数值之后没有单位！也可以用属性值表示：normal（默认值；400）bold（粗体；700）

### 字体样式 ###

CSS使用font-style属性设置文本的风格。

p {
    	font-style:normal;
    }

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>normal</td> 
   <td>默认值，浏览器会显示标准的字体样式</td> 
  </tr> 
  <tr> 
   <td>italic</td> 
   <td>浏览器会显示斜体的字体样式</td> 
  </tr> 
 </tbody> 
</table>

在实际应用中很少使用到斜体，反而要给斜体标签（em，i）改为不倾斜标签。

### 字体复合属性 ###

p{
    	/* font:font-style font-weight font-size/line-height font-family; */
    	font: italic 700 16px 'Microsoft yahei'
    }

通过一行代码改变字体的样式，粗细，大小和系列；注意在使用的时候顺序不能颠倒，并且各个属性之间用空格隔开。

不需要设置的属性可以省略，但是必须保留font-size和font-family属性，否则font属性整体不起作用。

发表评论取消回复

表情：

评论列表（有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

相关字体系列之字体复合属性(CSS、HTML)

字体系列之字体复合属性(CSS、HTML) <!DOCTYPE html> <html lang="en"> <head> <me

本是古典何须时尚/ 2023年10月03日 12:39/ 0 赞/ 25 阅读

相关 CSS中字体样式属性

font-family属性的部分属性值 <p><span style="font-family:STXinwei"> hello world</span>华文新魏

淡淡的烟草味﹌/ 2023年10月03日 11:37/ 0 赞/ 50 阅读

相关 CSS属性：字体属性和文本属性

本文重要内容 CSS的单位字体属性文本属性定位属性：position、float、overflow等 CSS的单位 html中的单位

太过爱你忘了你带给我的痛/ 2023年06月02日 09:08/ 0 赞/ 80 阅读

相关 CSS字体属性案例

```<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

谁践踏了优雅/ 2023年01月17日 04:41/ 0 赞/ 199 阅读

相关 CSS基础——CSS字体样式属性【学习笔记】

CSS字体样式属性调试工具 font字体 CSS外观属性快捷操作emmet语法练习案例-体育页面 1.font字体 1.1 font

淩亂°似流年/ 2022年12月22日 11:30/ 0 赞/ 303 阅读

相关 CSS新增属性----渐变、文本效果和字体

CSS3渐变（Gradients）通过CSS3渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡 `渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的

秒速五厘米/ 2022年12月04日 07:32/ 0 赞/ 327 阅读

相关 CSS中关于字体属性的学习

一,字体系列(font-fanily) p { font-family:"微软雅黑";} div {font-family: Arial,"Micros

ゞ浴缸里的玫瑰/ 2022年12月01日 01:20/ 0 赞/ 160 阅读

相关 1.2 CSS字体属性、文本属性与引入方式

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址： 1. H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教

Bertha 。/ 2022年11月19日 01:15/ 0 赞/ 228 阅读

相关 CSS字体样式属性

font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝

今天药忘吃喽~/ 2022年03月21日 05:12/ 0 赞/ 434 阅读

相关 CSS（一）字体样式属性

CSS字体样式属性一）字体 1.font-size 推荐使用相对长度像素单位px 2.font-family: {

墨蓝/ 2021年10月25日 11:58/ 0 赞/ 453 阅读