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

最新推荐文章于 2022-10-18 20:51:47 发布
最新推荐文章于 2022-10-18 20:51:47 发布
阅读量2.9k 收藏 12
点赞数 4
分类专栏： HTML+CSS基础知识 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43775721/article/details/110220905
版权

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; 注册商标 ®
不及你笑靥如花
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html分组元素
w_45678910的博客
10-10 324
figure元素和figcaption元素
css中font的简写方法(包括粗细、大小、行高、字体)
09-25
css中font的简写方法（包括font-weight，font-size,line-height,font-family） 也就是粗细、大小、行高、字体等等，把它们合在一起写，需要的朋友可以参考下
font使用
dh105364的博客
01-31 244
font连写属性 font-style font-variant font-weight font-size/line-height font-family font-size与font-family为必填 font-style 可指定的值为： normal（正常） italic（斜体） oblique（倾斜） inherit（继承父元素） font-variant值：...
css盒子模型_CSS基础-盒子模型
weixin_39979617的博客
11-27 81
CSS盒模型本质上是一个盒子，每一个元素都被抽象成一个盒子，每一个盒子又包括四部分内容(content)，内填充(padding)，边框(border)，外边距(margin)盒子模型简图标准盒子模型&&IE盒子模型IE盒子模型width = content-width + padding-width + border-widthheight = content-height + ...
font-size字体大小
m0_74172068的博客
10-18 5269
提示：网页文字默认的字体大小是12px，也就是你设置的字体小于12px，默认都会以12px大小显示 面试经常会问到，如何在页面小于12px的字体？font- size用来设置文字，字体大小，常用的单位是px像素，还有%百分比，移动端用的单位em。bloder表示更粗的字符：lighter；设置字体的粗细，通常使用的值有normal和bold两个值，或其对应数字400与700来表示。字体大小以百分比为单位，相对的是父元素font-size大小。百分比相对父元素的font-size大小而言。
font的使用
江湖再见
03-27 2192
font字体操作： 一、psd中[导出内容]格式选ai； 二、用ai打开刚才导出的文件，然后复制下； 三、打开fontCreator，然后新建一个字形并打开，将ai复制的内容粘贴进来，并导出； 四、字体转换。打开（http://www.fontsquirrel.com/tools/webfont-generator），上传刚才导出的文件，选择basic，然后
Sketch-Set-Line-Height-Plugin:设置相对于字体大小的行高
03-26
然而，原生的Sketch在调整文本行高时，可能无法满足设计师们对于精确到字体大小倍数的需求。这时，"Sketch-Set-Line-Height-Plugin"就应运而生了，它是一款能够帮助设计师快速设置相对于字体大小的行高的插件。 该...
CSS布局中设置字体文字大小值大于行高值.docx
11-22
要解决这个问题，可以通过设置字体文字大小值大于行高值来避免文字之间的重叠和不完整显示的情况。例如，可以将 line-height 设置为 22px，而 font-size 设置为 22px，这样可以确保文字之间的距离足够大，避免文字...
python IDLE 背景以及字体大小的修改方法
12-31
2.打开文件后，你会看到一些默认的颜色配置，比如经典的颜色配置就是白色背景，一般这个文件中会有两种配置可供选择： [IDLE Classic]和 [IDLE New]，表现在IDLE界面上就是在python shell下，选择options—...
前端~css~基准线与行高、行距和半行距/圆角矩形~
zxc的博客
03-07 2075
文章目录行高、行距与半行距背景控制 行高、行距与半行距 在HTML文件中，展示 的文字涉及到这几个基准线： 顶线 中线 基线 底线 这四条线分别对应了图中的位置，在 vertical-align属性中，有top、middle、baseline、bottom，就和这四条线有关。 行高是指上下文本行的基线间的垂直距离，即下图中两条线间的垂直距离。 行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。 半行距是行距的一半，即下图区域三垂直距离/2.区域1，2
Font 设置字体大小
qq_57867712的博客
06-03 4560
用法： 例子一： JTextArea Myarea = new JTextArea(); Myarea.setText("静夜思\n" +"床前明月光,\n" +"疑是地上霜。\n" +"举头望明月,\n" +"低头思故乡。\n" ); Myarea.setBounds(50, 50, 250, 250); Font font = new Font("宋体",Font.BOLD,4...
文字排版之font的使用
qq_31749287的博客
02-08 1488
1.10.1 字体大小设置font-size 其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。 可选参数值：xx-small | x-small | small | medium | large | x-large |xx-large|smaller | larger 一般页面中：12px      14px   12cm 1em 1.10.2
2.2-CSS基础--font 字体大小、粗细、样式
我的成长历程
07-23 626
字体大小、字体粗细、字体样式
a标签去除下划线css_css基础篇10--文本样式
weixin_39944146的博客
11-28 233
目标标线样式大小写转换首行缩进文本水平对齐行高字母间距与词间距之前介绍过文字样式，但文字样式只是针对一个字而已。现实往往更多处理的是大段的文字，也叫做段落。段落更注重的是排版效果。一个排版好看的文章，更吸引人去看。标线样式之前是使用标签来设置标线，但更推荐的是使用css来设置标线，因为样式与结构分离才是最好的选择。语法：text-decoration:属性值属性值各种标线，下划线和删除线用得较多，...
CSS进阶之基线（参考线）
xun__xing的博客
07-14 5190
基线（参考线）一、引入1.CSS属性2.文字二.行高三、vertical-align1.一个元素如果子元素出现行盒，该元素内部也会产生参考线2.行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒最高顶边，底边是该行行盒的最低底边。四、可替换元素和行块盒的基线 一、引入 1.CSS属性 font-size、line-height、vertical-align、font-family 这些属性的它们在页面里是参考的什么线，我们从文字的设计开始。 2.文字 文字是
css 修改文字基准线_DIV CSS文字删除线贯穿线怎么添加
weixin_39717026的博客
12-22 346
要记得，centent也要浮动的整理好的css样式如下：#header {width:50px;height:50px;background:#f69;margin:0px auto}#center{width:150px;height:50px;background:#ccc;margin:0px auto}.left {width:50px; height:50px; background...
【HTML】font标签&font属性的使用方法
热门推荐
豫州刺史
09-02 4万+
1、font标签          定义和用法：        &lt;font&gt;规定文本的字体、字体尺寸、字体颜色              定义和用法：&lt;font规定文本的字体、字体尺寸、字体颜色             实例：                  效果：              可选的属性: 属性 值 描述 color ...
css 加粗_27 个 CSS 面试的高频考点助力金三银四
weixin_39839018的博客
11-21 73
CSS是层叠样式表( Cascading Style Sheets )的缩写，是一种样式表语言，用于描述以 HTML 之类的标记语言编写的文档的布局。它是用于设计Web页面的三剑客之一，另外两位浩客是HTML和Javascript。CSS 的设计目的是使样式和内容分离，包括布局、颜色和字体。这种分离可以提高内容的可访问性，在样式特征的规范中提供更多的灵活性和控制，通过在一个单独的. .c...
html font设置字号,font字体大小 HTML里怎么设置字体大小？
weixin_42366095的博客
05-30 4033
css中font字体颜色怎么设置网页设计 中文一般用的字体大小，一般怎么设置font一般中文的字体大小是12px或者14px。操作方法如下：打开webstorm软件，在HTML文件中创建h1到h6六个标签，分别font-style设置字体风格，italic斜体，normal正常，oblique倾斜，inherit指继承格式，revert还原字体风格。html中字体的粗细怎么设置？字体大小是font...
qt treeview设置列宽和行高 字体大小
最新发布
05-27
以下是设置列宽、行高和字体大小的方法： 1. 设置列宽 可以通过设置QHeaderView的resizeSection()函数来设置某一列的宽度，例如： ```cpp QTreeView *treeView = new QTreeView; treeView->header()->...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值