css字体大小_CSS字体样式

最新推荐文章于 2023-02-28 04:15:00 发布
最新推荐文章于 2023-02-28 04:15:00 发布
阅读量321 收藏 1
点赞数
文章标签： css字体大小 css字体样式代码大全 html字体

12ad4bffaacf5314a2f54896e52b80fa.png

    字体样式常用的有五种属性，看下表。

属性说明
font-family字体类型
font-size字体大小
font-weight字体粗细
font-style字体风格
color字体颜色

    下面，我们一起来看看字体各个属性的详细说明。 

font-family

    可以使用font-family属性来定义不同的字体，如宋体、微软雅黑等。

    font-family可以指定多种字体。使用多个字体时，将按从左到右的顺序排列，并且以英文逗号(,)隔开。 

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>字体类型title>

        <style type="text/css">

            h4{font-family: Arial;}

            span{font-family: "Times New Roman";}

            p{font-family: "微软雅黑";}

            div{font-family: serif;}

        style>

    head>

    <body>

        <h4>刘德华h4>

        <span>张学友span>

        <p>郭富城p>

        <div>黎明div>

    body>

html>

29050ac98a47ad886822b2ce58be87cb.png

    如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或是中文的，则需要加上双引号。 

font-size

    font-size属性取值有两种：一种是“关键字”，如small、medium、large等；另外一种是“像素值”，如10px、16px、21px等。

    我们初入门先学习像素值就行了，之后在CSS进阶中学习em和百分比等。 

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>字体大小title>

        <style type="text/css">

            h4{font-size: 10px;}

            span{font-size: 15px;}

            p{font-size: 20px;}

            div{font-size: 25px;}

        style>

    head>

    <body>

        <h4>刘德华h4>

        <span>张学友span>

        <p>郭富城p>

        <div>黎明div>

    body>

html>

be603975b3827c2d68d3ced3e4584546.png 

font-weight

    font-weight属性取值有两种：一种是“100~900的数值”，另一种是“关键字”。  

关键字取值表

属性说明
normal正常(默认值)
lighter较细
bold较粗
bolder很粗

    font-weight属性可以取100、200、…、900这9个值。其中100相当于lighter，400相当于normal，700相当于bold，而900相当于bolder。 

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>字体粗细title>

        <style type="text/css">

            h4{font-weight: 100;}

            span{font-weight: 400;}

            p{font-weight: 700;}

            div{font-weight: 900;}

        style>

    head>

    <body>

        <h4>刘德华h4>

        <span>张学友span>

        <p>郭富城p>

        <div>黎明div>

    body>

html>

1056265de39de207f01315c18bdc1f2d.png

font-style

font-style属性取值如下表

属性说明
normal正常
italic斜体
oblique斜体

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>字体风格title>

        <style type="text/css">

            h4{font-style: normal;}

            span{font-style: italic;}

            p{font-style: oblique;}

            div{font-style: normal;}

        style>

    head>

    <body>

        <h4>刘德华h4>

        <span>张学友span>

        <p>郭富城p>

        <div>黎明div>

    body>

html>

2f4d4887f4ca669d2ffc93e15ca151c9.png

    从页面效果可以看出，font-style属性值为italic或oblique时，页面效果是一样的！ 原因是：有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。 

color

    color属性取值有两种，一种是“关键字”，另一种是“十六进制RGB值”。其它还有RGBA、HSL等，不过这些是在CSS3中。

DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>字体颜色title>

        <style type="text/css">

            h4{color: gray;}

            span{color: orange;}

            p{color: #03FCA1;}

            div{color: #0033ff;}

        style>

    head>

    <body>

        <h4>刘德华h4>

        <span>张学友span>

        <p>郭富城p>

        <div>黎明div>

    body>

html>

1cddc76472433dc53a821fb9e0d2399a.png

————————————————————————————————    本节主要学习了字体样式，最后对其总结。

  • 字体类型：font-family

  • 字体大小：font-size

  • 字体粗细：font-weight

  • 字体风格：font-style

  • 字体颜色：color     

weixin_39689506
关注
css零到一基础教程041：CSS 字体大小
kerryqpw的博客
03-22 380
字体大小 font-size属性设置文本的大小。 在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。 请始终使用正确的 HTML 标签，例如 <h1> - <h6> 用于标题，而 <p> 仅用于段落。 font-size 值可以是绝对或相对大小。 绝对尺寸： 将文本设置为指定大小 不允许用户在所有浏览器中更改文本大小（可访问性不佳） 当输出的物理尺寸已知时，绝对尺寸很有用 相对尺寸： 设置相对.
css 字体大小
最新发布
v3_234asdga的博客
01-13 395
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。font-size 属性设置文本的大小。字体大小的值可以是绝对或相对的大小。
CSS 字体大小 font-size属性
歪脖先生的博客
02-11 4万+
字体大小在CSS中，通过 font-size属性来设置元素中所包含文本的字体大小。如果一个元素没有显式定义font-size属性，则会自动继承父元素的 font-size属性的计算结果。定义 font-size 时，可以使用预定义关键字、绝对尺寸、相对尺寸：1）预定义关键字预定义关键字有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸...
CSS文字大小
weixin_42900834的博客
01-29 2375
1.代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti..
CSS设置字体大小
记录和分享属于我的“IT”时光
01-16 2882
CSS设置字体大小
CSS.rar_css_css样式_css网页样式_html_网页模板
09-24
CSS允许开发者控制网页的布局，包括颜色、字体、大小、空间、对齐方式以及更多其他视觉效果。 **标题** "CSS.rar" 暗示这是一个关于CSS样式的资源包，可能包含了预设的样式表模版，方便用户快速定制自己的网页外观...
css样式模板_css_
10-02
2. **字体与文字**：`font-family`指定字体，`font-size`设定大小，`line-height`调整行高，`text-align`控制文本对齐。 3. **尺寸与布局**：`width`和`height`设定元素大小，`margin`和`padding`控制内外边距，`...
CSS.rar_css_css样式
09-23
2. **属性（Properties）**：属性定义了元素的样式特性，如`color`改变文字颜色，`font-size`设置字体大小，`background-color`设定背景色。 3. **值（Values）**：每个属性都有相应的值，如颜色可以是预定义的颜色...
CSS 2.0样式表中文手册.rar_css 样式 手册_css开发手册
09-15
**CSS 2.0样式表中文手册** 在Web开发领域，CSS（Cascading Style Sheets）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS 2.0是其第二个主要版本，发布于1998年，它极大地扩展...
CSS.rar_css_word 样式
09-24
介绍:一、 什么是层叠样式表二、 如何建立样式三、 将层叠样式单放在何处四、 创建并引用样式类五、 字体属性六、 字体与文本属性七、 颜色与图像属性八、 边框属性九、 滚动条属性十.方块属性,十一、 其它属性,十二...
css字的大小,css 中字体大小
weixin_42679995的博客
08-03 6545
css属性font-size可以用来设置字体的大小, 可是有时候看到大小的设置是font:bold 20px/24px Verdana, Geneva, sans-serif;这里的20px/24px是指的什么, 这个斜杠表示什么呢?解答：font有多个属性，我写的时候一般就用缩写：font:normal 12px/22px "宋体";这样的意思是:字体不加粗，字号是12px，行高是22px，字体...
css中字体的大小怎么设置,css样式中怎么设置字体大小
weixin_42709044的博客
08-04 3万+
在css样式中，可以利用“font-size”属性来设置字体大小，只需给文本元素设置“font-size:值;”样式即可。font-size属性用于设置字体大小，实际上设置的是字体中字符框的高度，其实际字符字形可能比框高或矮(通常会矮)。本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。css样式中，可以通过设置“font-size”属性来设置字体...
CSS设置字体大小、字体粗细、字体风格
专研前端，探索后端
04-15 2万+
font-size:设置字体大小: 该属性值的单位可以使用相对单位和绝对单位，推荐使用相对定位中的px。(浏览器能够识别的最小像素是12px) p{ font-size:20px; } 常见尺寸单位： font-family:设置字体: 如果需要设置多个字体样式，则属性值可以写多个中间用逗号隔开即可，需要知道的是浏览器会从第一个字体属性值找，直到找到自己设备有的字体显示，自己设备没有的字体，按设备默认字体显示,推荐系统默认字体。 p{ font-family:"微软雅黑",Arial; }
CSS font-size字体文字大小样式属性
weixin_34101229的博客
01-24 396
CSS font-size字体文字大小样式属性-字体大小样式篇： 本节DIVCSS5为大家介绍通过CSS样式设置文字字体大小知识，涉及CSS样式单词font-size。 目录设置字体大小CSS单词与语法 font-size使用方法 font-size效果截图 font size=5什么意思 CSS font-size常见运用 font-size案例 对...
CSS字体属性：字体系列、字体大小、字体粗细、文字样式、字体复合属性
热门推荐
qq_44156869的博客
09-13 8万+
CSS字体属性 CSS Fonts (字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。 字体系列 CSS使用 font-family 属性定义文本的字体系列。 <head> <style> p {font-family: "微软雅黑";} div {font-family: ARIAL,"Microsoft Yahei","微软雅黑";} </style> </head> <body&
CSS字体大小：权威指南
08-20 125
字体在CSS的声音大小，就好像它应该很容易。 直到你试试吧。 许多开发人员使用的武力; 他们鼓捣的font-size属性，直到它看起来正确才发现它在其他浏览器不同。 有一点了解可以去很长的路要走...... 在font-size属性 该font-size属性可以为所有的HTML标签（即使它通常不包含诸如文本内容设置br ）。 它可以分配各种绝对的，相对的，或长度尺寸的参数。 除非你重写它的...
Css 中常用的字体大小
wangjieyunxia的专栏
11-29 1409
http://www.divcss5.com/rumen/r322.shtml CSS font-size字体文字大小样式属性-字体大小样式篇： 本节DIVCSS5为大家介绍通过CSS样式设置文字字体大小知识，涉及CSS样式单词font-size。 目录 设置字体大小CSS单词与语法 font-size使用方法 font-size效果截图 font size=5什么意思 C
CSS字体属性之字体系列、字体大小、字体粗细、字体样式以及字体的符合属性（基础详解）
qq_52763599的博客
01-13 1074
CSS字体属性之字体系列、字体大小、字体粗细、字体样式以及字体的符合属性（基础详解）
【CSS】CSS 文本样式 ① ( font 字体设置 | font-size 字号大小设置 | font-family 字体设置 | Unicode 编码字体名称 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-28 3826
一、 字号大小设置 1、 语法简介 2、 代码示例 二、 字体设置 1、 语法简介 2、 Unicode 编码字体名称 3、 代码示例
CSS字体缩写详解：快速设置字体样式
"CSS通用缩写语法是提高CSS代码效率的重要手段，特别是在处理字体样式和边距时。本文主要聚焦于`font`属性的缩写以及`margin`和`padding`的简写形式，帮助开发者更高效地编写CSS代码。" 在CSS中，`font`属性的缩写...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值