前端学习 -- Css -- 字体的几个属性学习
font-style可以用来设置文字的斜体
- 可选值：
- normal，默认值，文字正常显示
- italic 文字会以斜体显示
- oblique 文字会以倾斜的效果显示
- 大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic和oblique它们的效果往往是一样的
- 一般我们只会使用italic
font-weight可以用来设置文本的加粗效果
可选值：
- normal，默认值，文字正常显示
- bold，文字加粗显示
该样式也可以指定100-900之间的9个值，
但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果
也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的
font-variant可以用来设置小型大写字母
可选值：
- normal，默认值，文字正常显示
- small-caps 文本以小型大写字母显示
小型大写字母：
将所有的字母都以大写形式显示，但是小写字母的大写，
要比大写字母的大小小一些。
在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式,可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式
实际上使用简写属性也会有一个比较好的性能
第一个示例：利用font设置字体相关的所有样式。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: red;
font: small-caps bold italic 20px "微软雅黑";
}
</style>
</head> <body>
<p>
日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！ABC abc
</p>
</body> </html>
看下效果：
第二个示例：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
color: red;
/*设置一个文字大小*/
font-size: 55px;
/*设置一个字体*/
font-family: "agency fb";
/*设置文字斜体*/
font-style: italic;
/*设置文字的加粗*/
font-weight: bold;
/*设置一个小型大写字母*/
font-variant: small-caps;
}
</style>
</head> <body>
<p class="p1">日出而作，日入而息。 凿井而饮，耕田而食。 帝力于我何有哉！ABC abc</p>
</body> </html>
看下效果：
前端学习 -- Css -- 字体的几个属性学习的更多相关文章
- 前端之CSS字体和文本类属性
一.字体类属性: 1.字体类型: font-family:字体1,字体2,字体3; 常用写法: font-family:"微软雅黑",Arial; 注:a) 多个字体之间用逗号分隔 ...
- css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
- CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- 2020年12月-第02阶段-前端基础-CSS字体样式
CSS字体样式属性调试工具 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 1.font字体 1.1 font-size:大小 作用: font-size属性用于设置字 ...
- 前端学习 -- Css -- 字体
设置字体颜色,使用color来设置文字的颜色 设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的我们设置的 ...
- 前端学习 -- Css -- 字体分类
在网页中将字体分成5大类: serif(衬线字体) sans-serif(非衬线字体) monospace (等宽字体) cursive (草书字体) fantasy (虚幻字体) 可以将字体设置为这 ...
- 前端之CSS列表及背景类属性
一.列表类属性: 1.列表符号样式: list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号样式); 2. ...
- css 字体样式设置
css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style) ...
- css字体样式
css字体样式(Font Style) 属性 css文本样式 序号 中文说明 标记语法 1 字体样式 {font:font-style font-variant font-weight f ...
随机推荐
- Exp7：网络欺诈防范
Exp7:网络欺诈防范 基础问题回答 通常在什么场景下容易受到DNS spoof攻击? 答:同一局域网下,以及各种公共网络. 在日常生活工作中如何防范以上两攻击方法? 答: 使用最新版本的DNS服务器 ...
- 20155238 实验四 Android程序设计
Android 安装Android Studio 按照教程依次完成安装步骤.安装所存的相应文件夹必须纯英文,不能出现特殊字符. 32位系统和64位系统是同一个安装文件.启动程序中32位与64位都有.根 ...
- Yii2 软删除
什么是软删除 后台操作,删除一条记录,不希望真正的从数据库中删除,用个字段标记一下.比如delete_at.默认0.当执行删除操作,更新delete_at为当前时间戳 这样列表显示的时候只查询dele ...
- C++学习之从C到C++
头文件的包含 包含头文件可以不加.h结尾,如iostream,一些常用的头文件在引用时可以不加.h后缀,并在开头增加c,如: #include <cstdio> #include < ...
- C标准库string.h中几个常用函数的使用详解
strlen 计算字符串长度 size_t strlen(const char *str) 计算字符串 str 的长度,直到空结束字符,但不包括空结束字符. 函数实现: int Strlen(cons ...
- 蓝牙重启case之：hardware error
蓝牙的通信分为host和controller,host端发送数据和命令到controller,controller 上传event以及数据到host端,这要求上下两端的通信要求状态一致性. 当发生状态 ...
- JAVA 静态方法和实例方法的区别 （图表）
静态方法和实例方法的区别主要体现在两个方面: 在外部调用静态方法时,可以使用"类名.方法名"的方式,也可以使用"对象名.方法名"的方式.而实例方法只有后面这 ...
- EditText点击出现光标但不弹出软键盘
3.0以下版本可以用editText.setInputType(InputType.TYPE_NULL)来实现.或者设置editText.setKeyListener(null)来实现. 3.0以上版 ...
- Jmeter目录文件讲解
1.bin:核心可执行文件,包含配置 2.windows启动文件:jmeter.bat mac或linux启动文件:jmeter jmeter-server:mac或linux分布式压测启动文件 jm ...
- golang基础--类型与变量
基础知识--类型与变量 基本类型 布尔型:bool 长度: 1字节 取值范围: false, true 注意事项: 不可以使用数字代表,不像 python中可是使用 1和0表示 整型: int/uin ...