本节学习CSS中通过文本样式的设置,来更改字体样式等。
font-size用来设置字体大小。
①直接用数字+px表示多少像素。②用一个层级值xx-small,x-small,small,medium,large,x-large,xx-large从小到大。③使用smaller和larger表示相对于父元素字体的大小。④数字+%表示相对于父元素的字体的百分比大小。
font-variant设置字体是否以小型大写字母显示。
①small-caps让小写字母变小型大写字母。②normal将已经是小型大写的字母转换回小写状态(冲突替换)。
font-style设置字体是否倾斜。
①italic表示使用斜体(文字包自己的斜体)。②oblique表示让文字倾斜(不带斜体的字也可以强行倾斜)。③normal表示恢复正常。
font-weight设置字体是否加粗。
①bold粗体。②bolder更粗的字体(浏览器上往往看不出更粗)。③lighter轻细的字体(和默认一般一样)。④100-900之间的数字,600以后为加粗(在浏览器上看不出逐渐变化)。⑤normal恢复正常。
font-family设置字体。
后面直接跟着字体的名称即可,这样设置必须在本机中能找到该字体,所以往往写多个值(逗号隔开)。
font是前面的字体设置的合并写法。
格式:[是否倾斜|是否加粗|是否转小型大写] 字体大小 字体名称等。中括号里的表示可选的且顺序可换,外的表示必须写的且必须以这个顺序在最后,这些属性值都用空格隔开。
刚刚设置的字体是去寻找用户端的字体,这样不同的用户不见得都能用。web字体则是在服务器端去寻找这个字体。
将字体文件复制到指定的文件夹中(如和该CSS文件同目录下),然后用@font-face{}写它的font-family(起名)和src(字体所在目录)即可使用了。英文字体文件比较小可以这样使用,但中文字体文件较大,如果想用特殊字体不如使用图片,而不是这样的方法。
*测试代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>CSS文本样式 上</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>这是html5</p>
<b>这里被加粗了的html5</b>
</body>
</html>
@charset "utf-8";
body{
font-size: 50px;
font-variant: small-caps;
}
@font-face{
font-family: 'abc';/*为字体起名*/
src:url('HoboStd.otf');/*字体的目录*/
}
p{
/*font-size: 50px;*/
/*font-size: xx-small;*/
/*font-size: xx-large;*/
/*font-size: smaller;*/
font-size: larger;
font-variant: normal;
/*font-style: italic;*/
/*font-style: oblique;*/
/*font-weight: bold;*/
/*font-weight: bolder;*/
/*font-weight: lighter;*/
/*font-weight: 900;*/
font-family: 华文行楷,微软雅黑,宋体;
/*font: italic bold small-caps 50px 微软雅黑;*/
}
b{
font-family: abc;
}
运行结果: