html中字的大小怎么写,css font文字字体大小使用到font-size

傷城~ 2022-10-05 12:47 95阅读 0赞

css对文字设置-css文字-css font

接下来我们介绍下CSS基础，必须掌握的CSS知识——css对文字的设置或者说css文字样式学习。

DIV CSS可以设置文字的样式css font有哪些font文字目录CSS 文字的大小

文字的颜色

DIV CSS文字的下划线

DIV CSS文字的间隔

CSS 文字的字体

文字的上下行间距

CSS 字体样式(斜体)

CSS 字加粗方式

DIV+CSS英文字、字母大小写

DIV+Css开发中设置字体常用css属性单词英文css font-可进入CSS手册查看更详细CSS 文字知识font、font-family(字体)、font-size(字大小)、font-style(字样式)、font-weight(css加粗)、text-decoration(下划线)、font-variant(字母大小写)、text-transform(英文大小写)、letter-spacing(间隔)

接下来，我们一一实例讲解通过css文字控制方法

一、字体大小使用到font-size   -   TOP

![2796ebe05130dfec97289960916debee.png][]首先设置了font-size的值为36px,则下面结果显示字体比较大。

二、文字的颜色   -   TOP

文字颜色使用css color颜色属性通过color更样式值设置文字样式的颜色为红色

![913fe4eb00af659dff483aaab8dcf9d4.png][]css字体颜色案例截图

三、Css来控制文字的下划线方法css font，用到text-decoration   -   TOP

text-decoration可以进css手册了解对应值，你还可能还希望了解css链接，css超链接样式、css下划线

![1c7066b9c12a4305b9beede8e84b9662.png][]

四、文字的间隔-进入详细的CSS 字间距了解   -   TOP

五、文字的字体-用到css样式属性font-family   -   TOP

字体设置图例如下

![06b1a8f9361bc3daea48aa14da7c3d03.png][]字体案例截图

一般font-family字体可以跟常见的“宋体”，“新宋体”，“黑体”，注意的是不能自己设置不参加的字体样式，虽然在自己电脑上可能自己设置字体能表现出了，但是一般电脑用户都没有添加字体的，所以在这里字体只能设置常见，系统自带的字体，而不能设置自己安装的字体,中文字体转Unicode编码。电脑自带字体，和常设置文字字体有黑体、新宋体、宋体、Arial, Helvetica, sans-serif等

六、文字的上下行间距   -   TOP

上下行距使用到css文字设置单词line-height，这里设置line-height:50px;

可以看到演示css font文字段“我是被css控制文字样式演示。”离上下文字间隔距离是通过css line-height来实现。也许你需要了解br和p的区别。

七、字体样式(斜体)   -   TOP

文字斜体使用到css样式中font-style标签设置如font-style: italic,当然可以使用*标签将文字变为斜体*

八、字加粗方式   -   TOP

文字加粗可以直接对需要加粗文字前加**文字后加**或来实现，对文字的加粗，这里你可以用css来控制对文字加粗。这里用到font-weight来设置如font-weight:bold;

这里font-weight的值可以为100-900不等的方式为值，值越大字体越粗，如果值为bold则为正常加粗，同使用b或strong一致效果，b与strong加粗区别。

九、英文字、字母大小写css font   -   TOP

使用css中font-variant字母全大小，如font-variant:small-caps;，选择性大小写text-transform如text-transform:capitalize;开头首字母大写。

text-transform语法text-transform : none | capitalize | uppercase | lowercase 参数：none : 　无转换发生capitalize : 　将每个单词的第一个字母转换成大写，其余无转换发生uppercase : 　转换成大写lowercase : 　转换成小写

font-variant语法font-variant : normal | small-caps 参数：normal : 正常的字体small-caps : 小型的大写字母字体

提升与扩展思维css font代码：font:12px/1.5 Arial, Helvetica, sans-serif;一般常用以上代码定义一个网页的文字的css样式意思，这段代码以上是字体的大小是12px，line-height为1.5倍字体尺寸，字体是Arial, Helvetica, sans-serif。

Css font提升图例讲解

![819c66f8cf4803a15dcb181208214997.png][]font单词样式分析图

这样一定义可以节约很多代码，使用更简便以上即是div css网站为大家通俗的介绍css font，css文字相关知识与实例图讲。

[2796ebe05130dfec97289960916debee.png]: /images/20221005/e80017214adf4ef08735c901dbd24fbc.png
[913fe4eb00af659dff483aaab8dcf9d4.png]: /images/20221005/55941efaa44746eab5865ded96236b52.png
[1c7066b9c12a4305b9beede8e84b9662.png]: /images/20221005/d3aee12deda047f39c25486ba71321b0.png
[06b1a8f9361bc3daea48aa14da7c3d03.png]: /images/20221005/b8cec1e4b6a24dbbb7a3b7bd11c5acca.png
[819c66f8cf4803a15dcb181208214997.png]: /images/20221005/11131231bfdc49448af4079a64226ac9.png