• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

3.6 字体斜体样式font-style

一、font-style属性

在CSS中,使用font-style属性来定义字体倾斜效果。

语法:

font-style:取值;

说明:

font-style属性的取值如下表:

表1 font-style属性
font-style属性值 说明
normal 默认值,正常体
italic 斜体,这是一个属性
oblique 将字体倾斜,将没有斜体变量(italic)的特殊字体,要应用oblique

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>font-style属性</title>
    <style type="text/css">
        #p1{font-style:normal;}
        #p2{font-style:italic;}
        #p3{font-style:oblique;}
    </style>
</head>
<body>
    <p id="p1">字体样式为normal</p>
    <p id="p2">字体样式为italic </p>
    <p id="p3">字体样式为oblique</p>
</body>
</html>

在浏览器预览效果如下:

font-style属性

二、italic和oblique区别

我们看上例就可以知道,font-style属性值为italic或oblique时,在浏览器预览的效果是一样的!那这两者究竟有什么区别呢?

从预览效果我们看不出有什么区别,其实从表1中的定义就可以看出了,italic是字体的一个属性,也就是说并非所有字体都有这个italic属性,对于没有italic属性的字体,可以使用oblique将该字体进行倾斜设置。

一般字体有粗体、斜体、下划线、删除线等诸多属性。但是并不是所有的字体都有这些属性。一些不常用的字体,或许就只有个正常体,如果你用italic发现字体没有斜体效果,这个时候你就要用oblique。

可以这样理解:有些文字有斜体属性,也有些文字没有斜体属性。italic是使用文字的斜体,oblique是让没有斜体属性的文字倾斜。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部