font-family

这个属性指的是字体，比如说汉字中常说的行书与草书。

这个属性的值可以有多个，因为某些字体对于某些浏览器来说可能不适用，因此就会逐个往下匹配。

<p>Original line</p>
<p class="test">Test line</p>

p {font-size: 2em;
}p.test {font-family: fantasy, 'Times New Roman', Times, serif;
}

font-style

这个属性指定的是字体倾斜与否，italic 属性值是通过字体本身倾斜，oblique 属性值让字体倾斜一定角度，看起来效果一样，但是对于有些字体，可能原先不能倾斜，所以设置 italic 属性值不生效，设置成 oblique 就生效了。

<p>Original line</p>
<p class="test">Test line</p>

p {font-size: 2em;
}p.test {font-style: italic;
}

font-weight

此属性值定义了字体的宽度，属性值 lighter细，bold粗，bolder更粗，当然也可以设置具体数值100~900，只能是整百哦~

<p>Original line</p>
<p class="test">Test line</p>

p {font-size: 2em;
}p.test {font-weight: lighter;
}

font-variant

此属性的作用就是将文字转换成大写后缩小，看下列例子吧~

<p>Original line</p>
<p class="test1">uppercase original line</p>
<p class="test2">font-variant original line</p>

p {font-size: 2em;
}p.test1 {text-transform: uppercase;
}p.test2 {font-variant: small-caps;
}

第二句将第一句所有字母大写了，并没有改动字母的大小，而 font-variant 属性将字母全部大写后又将其缩小了。

总结

如果把一个字母比作人的话，那么

font-family 属性是美丑

font-style 属性是动作

font-weight 属性是胖瘦

至于 font-variant 属性，我愿意称作是整容(⊙ᗜ⊙)

font-family、font-style、font-weight、font-variant的区别「In CSS」相关推荐

HTML的style属性(替代font等标签)
为表达最原作者的尊重,文章只字未改,原文地址为: http://www.cnblogs.com/lovelq522/archive/2010/11/26/1888433.html HTML的style ...
FONT face=Verdana再测文字/FONT 的问题
<FONT face=Verdana>再测文字</FONT> 使用EWebEditor编辑器,字体为Verdana这样的时候,它就原样显示,不以Verdana字体来显示,Ver ...
Vue style里面使用scoped属性并@import引入外部css, 作用域是全局的解决方案
本来只是想解决如题的问题的,但是其中涉及的一些点,有些模糊,所以补充补充~ 首先是有关@import的问题,一般的文件中,我们知道引用外部css,有两种方式: 1. HTML中使用link标签 < ...
java中font的意思_java中的Font
Font 类位于 java.awt 中字体由三种属性决定: 1) 字体名(family name) 字体名可以分成两大类: 中文字体:宋体.楷体.黑体等: 英文字体:Arial.Times New ...
字体图标库（Font Awesome）的使用--绝佳的图标字体库和CSS框架
一.概述 web项目(前台/后台)开发中,很多地方需要使用图标样式(如:删除图标或短信图标,见下图),当然可以选择图片当背景或者用<img>标签,但是用图片的不灵活性也是显然易见的,如颜色 ...
js中style,currentStyle和getComputedStyle的区别以及获取css操作方法
在js中,之前我们获取属性大多用的都是ele.style.attr这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因为获 ...
java.awt.font 宋体,SpringBoot项目集成字体工具类
场景:采用JasperReport生成报表时,若将模版中的字体配置成宋体时.部署在不同的系统上时,可能会出现中文乱码的情况,也可以适用于其他任何需要单独配置字体的第三方库. 首先,你可以给部署的服务器 ...
一个demo学会css
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解学习了css权威指南这本书,自己喜欢边学边总结边写demo,所以写了这篇文章,包含了大部分的css编程 ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
第七篇：HTML文字与图片属性
目录一.文字属性 1.对齐属性:align 2.font标签字体属性:face 5.上标:sup和下标:sub 7.删除线s.斜体i.加粗b 10.不换行标签:nobr 二.图片属性 1.widt ...

font-family、font-style、font-weight、font-variant的区别「In CSS」

font-family

font-style

font-weight

font-variant

总结

font-family、font-style、font-weight、font-variant的区别「In CSS」相关推荐

最新文章

热门文章