css字体的分类及样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体的分类</title><style type="text/css">p{font-family: arial, 微软雅黑, 华文彩云, serif;}</style>
</head>
<body><p style="font-size: 50px; font-family: serif;">衬线字体：我是一段文字，ABCDEFGabcdefg</p><p style="font-size: 50px; font-family: sans-serif;">非衬线字体：我是一段文字，ABCDEFGabcdefg</p><p style="font-size: 50px; font-family: monospace;">等宽字体：我是一段文字，ABCDEFGabcdefg</p><p style="font-size: 50px; font-family: cursive;">草书字体：我是一段文字，ABCDEFGabcdefg</p><p style="font-size: 50px; font-family: fantasy;">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>

二、样式

1: font-style可以用来设置文字的斜体

可选值：
     normal 默认值，文字正常显示
     italic 文字会以斜体显示
     oblique 文字会以倾斜的效果显示
大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic和oblique效果是一样的
一般我们只会使用italic

2: font-weight可以用来设置文本的加粗效果

可选值：
     normal 默认值，文字正常显示
     bold 文字加粗显示
     该样式也可以指定100-900之间的9个值
但是由于用户的计算机往往没有这么多级别的字体，所以200有可能比100粗，但也有可能是一样的

3: font-variant可以用来设置小型大写字母

可选值：
     normal 默认值，文字正常显示
     small-caps 文本以小型大写字母显示
小型大写字母：
     将所有的字母都以大写形式显示，但是小写字母的小型大写，要比大写字母小一些

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体的其它样式</title><style type="text/css">.p1{color: red;font-size: 30px;font-family: 微软雅黑;font-style: italic;font-weight: bold;font-variant: small-caps;}.p2{/*设置一个文字大小*/font-size: 50px;/*设置一个字体*/font-family: 华文彩云;/*设置文字斜体*/font-style: italic;/*设置文字加粗*/font-weight: bold;/*设置一个小型大写字母*/font-variant: small-caps;}.p3{/*在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式可以将字体的样式值统一写在font样式中，不同的值之间使用空格隔开使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式实际上使用简写属性也会有一个比较好的性能*/font: bold italic small-caps 60px "微软雅黑";}</style>
</head>
<body><p class="p1">我是一段文字，ABCDEFGabcdefg</p><p class="p2">我是一段文字，ABCDEFGabcdefg</p><p class="p3">我是一段文字，ABCDEFGabcdefg</p>
</body>
</html>

css字体的分类及样式相关推荐

说一下CSS字体属性
CSS Fonts(字体)属性用定义字体系列,大小粗细,和文字样式(如斜体) 3.1字体系列 CSS使用font-family属性定义文本字体系列 p { font-family:'微软雅黑' ;} ...
产生粗体字的html标签,html字体加粗用css设置文字粗体样式
html如何加粗文字,HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方 ...
CSS字体、行高等其他样式
CSS字体.行高等其他样式一.长度单位与颜色单位 1. 长度单位 <!DOCTYPE html> <html lang="en"><head> ...
最详细的CSS字体样式总结（font-family、font-size、font-weight、font-style等）
文章目录前言一.字体系列二.字体大小三.字体粗细四.字体样式五.字体复合属性写法总结前言由于自己在学习CSS的过程中会时不时忘记一些CSS字体样式的书写,因此在本文记录了一些常用的C ...
css字体样式，选择器，外观属性
css字体样式,选择器,外观属性字体样式 ont-size:字号大小 font-family:字体 css unicode 字体 font-weight:字体粗细 font-style:字体风格 f ...
html语言加粗,html字体加粗用css设置文字粗体样式
HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方法途径. 一.html ...
css 字体样式设置
css字体样式(Font Style),属性时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style)是网 ...
css字体样式代码大全_这都2020年了，还没了解CSS？
对于新人来说想要了解css,就要从最基本的入手了解,讲真的学习css入门很简单,学习html和css短时间后你就可以制作一个网页,深入的去学习的话,就会很难.他就是从简--深--深--简的一个过程,如 ...
css字体样式 1204
css字体样式 1204 字体大小样式 font-size:字体大小 font-size: 20px; 字体家族 font-family:字体1名称,字体n名称 font-family: 华文行楷; ...

css字体的分类及样式

一、分类

二、样式

css字体的分类及样式相关推荐

最新文章

热门文章