【CSS3学习笔记】5：CSS文本样式上

最新推荐文章于 2021-06-16 00:20:42 发布

LauZyHou

最新推荐文章于 2021-06-16 00:20:42 发布

阅读量700

点赞数

分类专栏： CSS 文章标签： html5 css 字体

本文链接：https://blog.csdn.net/SHU15121856/article/details/74787981

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本节学习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;
}

运行结果：
这里写图片描述

LauZyHou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS3学习笔记】5：CSS文本样式上

本节学习CSS中通过文本样式的设置，来更改字体样式等。 font-size用来设置字体大小。 ①直接用数字+px表示多少像素。②用一个层级值xx-small，x-small，small，medium，large，x-large，xx-large从小到大。③使用smaller和larger表示相对于父元素字体的大小。④数字+%表示相对于父元素的字体的百分比大小。font-variant设置字体
复制链接

扫一扫