欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+CSS基础 >

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

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

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

font文字目录
  1. CSS 文字的大小
  2. 文字的颜色
  3. DIV CSS文字的下划线
  4. DIV CSS文字的间隔
  5. CSS 文字的字体
  6. 文字的上下行间距
  7. CSS 字体样式(斜体)
  8. CSS 字加粗方式
  9. DIV+CSS英文字、字母大小写

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

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

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


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

二、文字的颜色   -   TOP

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


css字体颜色案例截图

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

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

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

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

字体设置图例如下


字体案例截图

一般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,当然可以使用<em>标签将文字变为斜体

八、字加粗方式   -   TOP

文字加粗可以直接对需要加粗文字前加<b>文字后加</b>或<strong></strong>来实现,对文字的加粗,这里你可以用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提升图例讲解


font单词样式分析图

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

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r74.shtml

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-08-14 17:37 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。