font用法分析讲解:样式、大小(解决浏览器默认字体大小问题)、粗细、类型、行高、小型大写、 文本的大小写、对齐方式、首行缩进、文本修饰横线、间距、 换行方式与强制换行、文本溢出(...)、字符实体

一、font-family 字体样式

字体的分类:

  • serif(衬线)
  • sans-serif(无衬线)
  • monospace(等宽)
  • fantasy(梦幻)
  • cuisive(草体)
    详情链接

使用方法:

<body>
    <div id="wrap">
        <!-- 除了宋体以外,我们还可以通过 font-family来设置其他字体,比如微软雅黑、黑体等等-->
        <p class="paragrahp" style="font-family:'Microsoft yahei','宋体'">此处使用宋体书写文字大小</p>
    </div>
</body>

二、font-size 字体大小

单位:px |%|em|rem
注意:

  • % -相对于父容器中字体%调整
  • 1em -等于父级的字体尺寸— 相对于父级字体大小而言
  • rem -相对于html(根标签)的字体大小,根节点的默认大小是16px

使用方法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体大小</title>
    <style type="text/css">
        html {
            font-size: 100px;
        }
        
        #wrap {
            font-size: 20px;
        }
        
        .paragrahp1 {
            /* 相对于父容器中字体%调整,此处是 id为wrap的div容器 */
            font-size: 30px;
        }
        
        .paragrahp2 {
            font-size: 10%;
        }
        
        .paragrahp3 {
            /* 相对于父级字体大小而言,此处是 id为wrap的div容器 */
            font-size: 2em;
        }
        
        .paragrahp4 {
            /* 相对于根节点(html)字体大小,默认是16px */
            font-size: 1rem;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <p class="paragrahp1">aaaa</p>
        <p class="paragrahp2">bbbb</p>
        <p class="paragrahp3">cccc</p>
        <p class="paragrahp4">dddd</p>
    </div>
</body>

</html>

在这里插入图片描述
补充: 不同浏览器的默认字体大小不一样,Chrome、Safar默认限制大小为12px,当字体小于12px的时候,浏览器会默认设置为12px。
上述代码用谷歌浏览器实验如下:
在这里插入图片描述
解决方法:

  1. 可以通过改变浏览器默认最小字体大小,以此达到目的。但是治标不治本,不可能要求用户去设置最小字体大小,而且设置最小字体大小也是有限制的。
  2. 用css的缩小来写,就可以达到我们想要的效果
.paragrahp1 {
            /*在这里,字体大小并没有缩小,缩小的是这段文字的容器*/
            font-size: 12px;
            transform: scale(0.1);
            transform-origin: left;
        }
        

三、font-weight 字体粗细

  • normal 正常
  • bold 加粗
  • lighter变细
  • 数字法(100,200,300,400,500,600,700,800,900)定义由粗到细的字符。关键字“normal”相当于“400”,“bold”相当于“700”。除了“normal”和“bold”以外的其他关键字常常会令浏览器产生误解,无法直接和数值相匹配,此时字体的粗细程度通常取决于字体本身的设置。

使用方法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体粗细</title>
    <style type="text/css">
        #wrap {
            font-size: 20px;
        }
        
        .paragrahp1 {
            font-weight: normal;
        }
        
        .paragrahp2 {
            font-weight: bold;
        }
        
        .paragrahp3 {
            font-weight: lighter;
        }
        
        .paragrahp4 {
            font-weight: 600;
        }
    </style>
</head>

<body>

    <div id="wrap">
        <p class="paragrahp1">正常</p>
        <p class="paragrahp2">加粗</p>
        <p class="paragrahp3">变细</p>
        <p class="paragrahp4">关键字</p>
    </div>
</body>

</html>

在这里插入图片描述

四、font-style 字体类型(规定是否倾斜)

  • normal 文字正常
  • italic 文字斜体
  • oblique 文字倾斜

使用方法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体倾斜</title>
    <style type="text/css">
        #wrap {
            font-size: 20px;
        }
        
        .paragrahp1 {
            font-style: normal;
        }
        
        .paragrahp2 {
            font-style: italic;
        }
        
        .paragrahp3 {
            font-style: oblique;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <p class="paragrahp1">文字正常</p>
        <p class="paragrahp2">文字斜体</p>
        <p class="paragrahp3">文字倾斜</p>
    </div>
</body>

</html>

在这里插入图片描述

五、line-height 行高(设置行与行之间的距离)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体行高</title>
    <style type="text/css">
        #wrap {
            font-size: 20px;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <p class="paragrahp">abcd123</p>
        <p class="paragrahp">abcd123</p>
    </div>
</body>

</html>

在这里插入图片描述

六、font-variant 规定小型大写字母的字体

  • normal 一个标准的字体
  • small-caps 小型大写字母的字体
  • inherit 规定应该从父元素继承 font-variant 属性的值

注意:使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

使用方法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小型字母大写</title>
    <style type="text/css">
        #wrap {
            font-variant: small-caps;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <p class="paragrahp">abcd123THZE</p>
    </div>
</body>

</html>

在这里插入图片描述

七、text-transform 文本的大小写

  • uppercase 字母大写
  • lowercase 小写字母
  • capitalize 单词首字母大写

使用方法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本的大小写</title>
    <style type="text/css">
        #wrap {
            font-size: 20px;
            line-height: 20px;
        }
        
        .paragrahp1 {
            text-transform: uppercase;
        }
        
        .paragrahp2 {
            text-transform: lowercase;
        }
        
        .paragrahp3 {
            text-transform: capitalize;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <p class="paragrahp1">字母大写:I am student</p>
        <p class="paragrahp2">字母小写:I am student</p>
        <p class="paragrahp3">首字母大写:I am student</p>
    </div>
</body>

</html>

在这里插入图片描述

八、text-align 文本水平对齐方式

  • left 把文本排列到左边
  • center 居中对齐
  • right 把文本排列到右边
  • justify 实现两端对齐文本效果

使用方法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对齐方式</title>
    <style type="text/css">
        #wrap {
            font-size: 20px;
            line-height: 20px;
        }
        
        .paragrahp1 {
            width: 200px;
            text-align: left;
            margin: 10px;
            float: left;
        }
        
        .paragrahp2 {
            width: 200px;
            text-align: center;
            margin: 10px;
            float: left;
        }
        
        .paragrahp3 {
            width: 200px;
            text-align: right;
            margin: 10px;
            float: left;
        }
        
        .paragrahp4 {
            width: 200px;
            text-align: justify;
            margin: 10px;
            float: left;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <p class="paragrahp1">左对齐:font:字体。在微机系统里通常用“fonts”文件夹存放已安装的字体,自己安装字体时,也需要装入“fonts”文件夹中。</p>
        <p class="paragrahp2">居中对齐:font:字体。在微机系统里通常用“fonts”文件夹存放已安装的字体,自己安装字体时,也需要装入“fonts”文件夹中。</p>
        <p class="paragrahp3">右对齐:font:字体。在微机系统里通常用“fonts”文件夹存放已安装的字体,自己安装字体时,也需要装入“fonts”文件夹中。</p>
        <p class="paragrahp3">两端对齐:font:字体。在微机系统里通常用“fonts”文件夹存放已安装的字体,自己安装字体时,也需要装入“fonts”文件夹中。</p>
    </div>
</body>

</html>

在这里插入图片描述

九、text-indent 首行缩进 (em)

使用方法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首行缩进</title>
    <style type="text/css">
        #wrap {
            font-size: 20px;
            text-indent: 2em;
            width: 300px;
            text-align: justify;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <p class="paragrahp1">在微机系统里通常用“fonts”文件夹存放已安装的字体,自己安装字体时,也需要装入“fonts”文件夹中。</p>
    </div>
</body>

</html>

在这里插入图片描述

十、text-decoration 文本修饰(横线)

  • underline 下划线
  • line-through 中划线
  • overline 上划线

使用方法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 文本修饰</title>
    <style type="text/css">
        #wrap {
            font-size: 20px;
        }
        
        .paragrahp1 {
            text-decoration: underline;
        }
        
        .paragrahp2 {
            text-decoration: line-through;
        }
        
        .paragrahp3 {
            text-decoration: overline;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <p class="paragrahp1">下划线</p>
        <p class="paragrahp2">中划线</p>
        <p class="paragrahp3">上划线</p>
    </div>
</body>

</html>

在这里插入图片描述

十一、letter-spacing字(单词)间距与word-spacing 词(单词)间距

使用方法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>间距</title>
    <style type="text/css">
        #wrap {
            font-size: 20px;
        }
        
        .paragrahp1 {
            letter-spacing: 20px;
        }
        
        .paragrahp2 {
            word-spacing: 20px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <p class="paragrahp1">字间距:I am student</p>
        <p class="paragrahp2">词间距:I am student</p>
    </div>
</body>

</html>

在这里插入图片描述

十二、white-space 换行方式与word-break: break-all; 强制换行

  • normal 默认。空白会被浏览器忽略
  • pre 空白会被浏览器保留。
  • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
    标签为止。 pre-wrap 保留空白符序列,但是正常地进行换行
  • pre-line 合并空白符序列,但是保留换行符
  • inherit 规定应该从父元素继承 white-space 属性的值

word-break: break-all; 强制到达边框换行
使用方法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首行缩进</title>
    <style type="text/css">
        #wrap {
            font-size: 20px;
            width: 100px;
        }
        
        .paragrahp1 {
            border: 5px solid red;
            margin: 10px;
            width: 100px;
            white-space: normal;
        }
        
        .paragrahp2 {
            border: 5px solid red;
            margin: 10px;
            width: 100px;
            white-space: nowrap;
        }
        
        .paragrahp3 {
            border: 5px solid red;
            margin: 10px;
            width: 100px;
            word-break: break-all;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div class="paragrahp1">AAAAAAAAAAAAAAAAAAAAAAAA</div>
        <div class="paragrahp2">BBBBBBBBBBBB</br>BBBBBBBBBBBB</div>
        <div class="paragrahp3">CCCCCCCCCCCCCCCCCCCCCCCC</div>
    </div>
</body>

</html>

在这里插入图片描述

十三、 text-overflow 定义文本溢出时处理方式

text-overflow:ellipsis 被修剪的文本用略符号来代表(…)。
在这里插入图片描述

使用方法:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首行缩进</title>
    <style type="text/css">
        #wrap1 {
            font-size: 20px;
            width: 100px;
        }
        
        .paragrahp1 {
            border: 5px solid red;
            margin: 10px;
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        #wrap2 {
            border: 5px solid red;
            margin: 10px;
            font-size: 20px;
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /* 数字代表几行 */
            -webkit-line-clamp: 2;
        }
    </style>
</head>

<body>
    <div id="wrap1">
        <p class="paragrahp1">AAAAAAAAAAAAAAAAAAAAAAAA</p>
    </div>

    <div id="wrap2">
        <p class="paragrah2">BBBBBBBBBBBBBBBBBBBBBBBBB</p>
        <p class="paragrah3">CCCCCCCCCCCCCCCCCCCCCCCCC</p>
        <p class="paragrah4">DDDDDDDDDDDDDDDDDDDDDDDDD</p>
    </div>
</body>

</html>

在这里插入图片描述

十四、white-space 换行方式与word-break: break-all; 强制换行

  • &nbsp; 空格符
  • &lt; 小于符号 <
  • &gt; 大于符号 >
  • &copy; 版权 ©
  • &reg; 注册商标 ®
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页