且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

字体属性 | 学习笔记

更新时间:2022-09-05 14:30:17

开发者学堂课程【CSS 快速掌握字体属性】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/611/detail/9172


字体属性

 

内容介绍

一、属性名具体内容

二、代码演示

 

 

一、属性名具体内容

属性名:font-stylee :normal(正常)、(italic)斜体 功能:设置文本为斜体。

属性名:font-weightr 值 normal(正常)、bolde 功能:设置文字粗细。

属性名:font-size 值:如12 px、14 px。功能:给文本设置大小。

属性名:font-family 值:微软雅黑、楷体、宋体.... 功能: 给文本设置字体。

属性名:fonte 值:举例:font:italic bold 14px“微软雅黑 功能:简写属性能够同时给文本设置斜体、加粗、大小、字体每一个值之间需要使用空格 并且一定要有顺序。

关于字体:一般很特殊的字体 网站上面都是使用图片来表示。是否能够显示此字体是根据用户电脑里面是否有对应的字体文件,如果没有该文件就会显示为宋体。

 

二、代码演示

<title>字体属性</title>

<style type="text/css">

.zhang{

font-style:italic;/*将文本设置为斜体*/

font-weight:bold;/*将文本设置加粗效果*/

font-size:36px;/设置文本的大小*/

font-family:“黑体”,“宋体”,“微软雅黑”;

}

I{

font-style:normal;/*将斜体恢复正常*/

}

B{

font-weight:normal;/*将加粗效果恢复正常*/

}

.lin{

/分别设置的*/

/*font-style:italic;

font-weight:bold;

font-size:24px;

font-family:"楷体”;*/

font:italic bold 24px“楷体";/

}

</style>

</head>

<body>

<h3>诛仙</h3>

<p>故事是从一个叫做<span class="zhang">张小凡</span>的普通少年开始的。<i>机缘巧合,</i>一位<b>天音寺</b>名为普智的高…除了张小凡和<span class="lin">林惊羽</span>两个小孩…

七脉会武</p>

</body>

</html>