前端学习 -- 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 ...
随机推荐
- 20155218《网络对抗》MSF基础应用
20155218<网络对抗>MSF基础应用 实验过程 1.一个主动攻击实践,如ms08_067; 首先使用 search ms08_067查询一下该漏洞: show target 查看可以 ...
- 20155238 2016-2017-2《Java程序设计》课程总结
每周作业链接汇总(按顺序) 预备作业1 预备作业2 预备作业3 第一周作业 第二周作业 第三周作业 第四周作业 第五周作业 第六周作业 第七周作业 第八周作业 第九周作业 第十周作业 自认为写得最好一 ...
- Docker-compose部署gitlab中文版
目录 Docker-compose部署gitlab 1.安装Docker 2.安装Docker-compose 3.安装Gitlab Docker-compose部署gitlab 1.安装Docker ...
- mysql安装版多次安装导致安装失败的解决方法（windows）（直接使用免安装方法）
https://www.cnblogs.com/feilongblog/p/mysql_install_init.html 测试成功 要点:mysqld install MySQL --default ...
- windows下如何查看进程、端口占用、杀死进程教程
一. 查看所有进程占用的端口 在开始-运行-cmd,输入:netstat –ano 可以查看所有进程 二.查看占用指定端口的程序 当你在用tomcat发布程序时,经常会遇到端口被占用的情况,我们想知道 ...
- 【转载】SSD断电保护原理
异常掉电的隐患 若没有合理的掉电保护机制,而异常掉电的发生又不可避免,当发生异常掉电,会引发很多问题. (1)丢盘 异常掉电,会使得映射表来不及保存,丢失逻辑地址到物理地址的映射,待重新上电后,SSD ...
- EditText点击出现光标但不弹出软键盘
3.0以下版本可以用editText.setInputType(InputType.TYPE_NULL)来实现.或者设置editText.setKeyListener(null)来实现. 3.0以上版 ...
- sass：常用备忘
一.变量 所有变量以$开头 $font_size: 12px; .container{ font-size: $font_size; } 如果变量嵌套在字符串中,需要写在#{}中 $side : le ...
- （转）OWASP ZAP下载、安装、使用（详解）教程
OWASP Zed攻击代理(ZAP)是世界上最受欢迎的免费安全审计工具之一,由数百名国际志愿者*积极维护.它可以帮助您在开发和测试应用程序时自动查找Web应用程序中的安全漏洞. 也可以说:ZAP是一个 ...
- idou老师教你学Istio ：如何用istio实现监控和日志采集
大家都知道istio可以帮助我们实现灰度发布.流量监控.流量治理等功能.每一个功能都帮助我们在不同场景中实现不同的业务.那Istio是如何帮助我们实现监控和日志采集的呢? 这里我们依然以Bookinf ...