视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
css里的font文字怎么设置
2020-11-27 18:49:41 责编:小采
文档

说到font属性大家想到的一定是文字,那么这篇文章就带大家好好的认识一下CSS对于文字的设置,或者说对于文字样式设置的学习。

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

首先设置了font-size的值为36px,则下面结果显示字体比较大。

二、文字的颜色

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

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

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

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

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

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

六、文字的上下行间距

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

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

七、字体样式(斜体)

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

八、字加粗方式

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

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

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

使用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 : 小型的大写字母字体

相信看了这些案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

相关阅读:

Css3中的transform 渐变属性怎么使用

css中常见的单位的总结

如何用CSS3属性选择器替代JS的作用

下载本文
显示全文
专题