前端学习 -- 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 ...
随机推荐
- Android 下拉刷新上拉加载PullToRefresh
https://github.com/823546371/PullToRefresh http://www.jianshu.com/p/0f5d0991efdc
- c# thread pause example
some times we need pause thread to do some additional job: c# thread pause example as below: 1. crea ...
- 20155202张旭 Exp5 MSF基础应用
20155202张旭 Exp5 MSF基础应用 实践内容 本次实验我使用的攻击方式: 1.针对office软件的主动攻击:--MS10-087: 2.MS10-002漏洞对浏览器攻击 3.针对客户端的 ...
- Hiberante持久化对象的3种状态
近日一同事问我关于Hibernate中对象的3种状态的问题,因此特意总结一下.在Hibernate中对象是有以下3中状态: 瞬时态(transient object): 没有OID值,没有被s ...
- Spring-data-jpa 学习笔记（一）
Spring家族越来越强大,作为一名javaWeb开发人员,学习Spring家族的东西是必须的.在此记录学习Spring-data-jpa的相关知识,方便后续查阅. 一.spring-data-jpa ...
- WPF绑定文本时使用指定格式文本
原文:WPF绑定文本时使用指定格式文本 Text="{Binding PlayletModel.characters,StringFormat=Cast : {0}}" Strin ...
- 微信小程序之可滚动视图容器组件 scroll-view
1. 纵向滚动 scroll-y 当 设置为scroll-y 时, 需要将其高度设为固定值 如果整个页面,即最外层标签为scroll-view,需要并将其高度设为100%,也需要将page设为100% ...
- 企业落地Kubernetes的问题与对策
在当今云计算领域,“容器技术”已经从三四年前的炒作期正式进入了产业落地期,而Kubernetes作为容器平台的标准已经得到了广泛应用. Kubernetes从2014年6月由Google宣布开源,到2 ...
- 了不起的Node.js--之一
在OSX下安装Nodejs 从Node.js官网下载PKG文件,其文件名格式遵循node-v.?.?.?.pkg.若要通过手动编译来进行安装,请确保机器上已安装了XCode,然后根据Linux下的编译 ...
- 制作R中分词的字典的办法
在开始下面步骤之前先让自己的文件可以显示扩展名. 如何显示请谷歌. 第一步:打开一个文本文件 第二步:把你要的词复制到这个文本文件吧. 第三步:将这个文本文件的格式改为dic.即原来文件格式是txt后 ...