前端学习 -- 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 ...
随机推荐
- 20155207王雪纯《网络对抗》Exp4 恶意代码分析
20155207 <网络对抗> 恶意代码分析 学习总结 实践目标 1.是监控你自己系统的运行状态,看有没有可疑的程序在运行. 2.是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件 ...
- 2018-3-7 20155317 王新玮 Exp1 PC平台逆向破解(5)M
2018-3-7 20155317 王新玮 Exp1 PC平台逆向破解(5)M 任务要求:手工修改可执行文件,改变程序执行流程,直接跳转到getShell函数. NOP.JNE.JE.JMP.CM ...
- python 回溯法 子集树模板 系列 —— 12、选排问题
问题 从n个元素中挑选m个元素进行排列,每个元素最多可重复r次.其中m∈[2,n],r∈[1,m]. 如:从4个元素中挑选3个元素进行排列,每个元素最多可重复r次. 分析 解x的长度是固定的,为m. ...
- Java设计模式-建造者(Builder)模式
目录 由来 使用 1. 定义抽象 Builder 2. 定义具体 Builder类 3. 定义具体 Director类 4. 测试 定义 文字定义 结构图 优点 举例 @ 最近在看Mybatis的源码 ...
- 深入了解Kubernetes REST API的工作方式
关于Kubernetes REST API的工作方式: 在哪里以及如何定义从REST路径到处理REST调用的函数的映射? 与etcd的交互发生在哪里? 从客户端发出请求到保存在etcd中对象的端到端路 ...
- Python_Xlrd&Xlwt
import xlrd # \U 开始的字符被编译器认为是八进制 解决方法 r objWB = xlrd.open_workbook(r'C:\Users\IBM\Desktop\S1\7月下旬入库表 ...
- Unity 图文重现官方教程视频 2droguelike 第一集
初衷: 本人初学Unity,四处收集了一些视频和教材,学习和摸索了一段时间, 我发现官网教程简单易上手,只不过他是英文讲解不方便,我就想把他翻译翻译吧, 然后我又发现看视频学习要暂停回放好多遍,麻烦, ...
- linux 常用命令-tar(压缩、解压)
linux中通过tar命令来压缩解压文件,常用命令如下 主选项(主选项是必须要有的,作用是告诉这次操作的主要目的): 1)c: (create)创建压缩包或者打包 2)x:(extract)拆包 3) ...
- 第二个spring冲刺总结
讨论成员:罗凯旋.罗林杰.吴伟锋.黎文衷 第二阶段总体是做到了四则运算的demo,,包括APP进入动画,以及界面的基本效果设计,还有能进行综合计算(选择题,可以 自动生成简单,容易,困难 三种难度 ...
- （第三周）c#程序理解
阅读下面程序,请回答如下问题: 问题1:这个程序要找的是符合什么条件的数? 问题2:这样的数存在么?符合这一条件的最小的数是什么? 问题3:在电脑上运行这一程序,你估计多长时间才能输出第一个结果?时间 ...