CSS文本样式

最新推荐文章于 2024-05-10 13:52:23 发布
最新推荐文章于 2024-05-10 13:52:23 发布
阅读量293 收藏
点赞数
分类专栏： # CSS 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JWbonze/article/details/121136044
版权

基础

font系列

字体font-family

<body>
    <div style="font-family: '黑体';">
        你好-黑体
    </div>
    <div style="font-family: '微软雅黑';">
        你好-微软雅黑
    </div>
    <div style="font-family: '方正姚体';">
        你好-方正姚体
    </div>
    <div style="font-family: '华文仿宋';">
        你好-华文仿宋
    </div>
    <div style="font-family: 'Times New Roman';">
        你好-Times New Roman
    </div>
    <div style="font-family: '宋体';">
        你好-宋体
    </div>
    <div style="font-family: '华文细黑';">
        你好-华文细黑
    </div>
</body>

效果：
在这里插入图片描述
font-family通用值：宋体、黑体、微软雅黑、微软正黑体、新宋体、新细明体、细明体、楷体、仿宋。
一般浏览器常用的字体包括宋体、黑体、微软雅黑等几种。网页载入选择字体时首先调用用户电脑系统字体库的字体，如果没有找到这些字体就会使用默认的网页字体。但为了特殊需要，有时需要显示特定字体。

引入字体@font-face

示例中szz.ttf文件是字体文件，从网上下载的。该文件与html文件在同一文件目录下。

<head>
    <style type="text/css">
        @font-face {
            font-family: 'szz';
            /*Google 浏览器，火狐浏览器支持的字体类型*/
            src:url('./szz.ttf') format('truetype');
        }   
        .test {
            font-family: 'szz';
        }
    </style>
</head>
<body>
    <div class="test">
        你好-外部字体
    </div>
</body>

效果：
在这里插入图片描述

字号font-size

font-size操作文字大小，值可以是数值、百分比或者常用值（larger、smaller等）。
数值
重点是单位。
（1）px
px表示像素，一个像素就是计算机上的一个点。该单位具体大小因屏幕分辨率而定。浏览器默认16px。
（2）em
W3C推荐使用 em 尺寸单位。1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。可以使用下面这个公式将像素转换为 em：pixels/16=em（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）
（3）vh、vm、vmin
百分比
% 把 font-size 设置为基于父元素的一个百分比值。
常用值
smaller：把 font-size 设置为比父元素更小的尺寸。
larger：把 font-size 设置为比父元素更大的尺寸。
inherit：规定应该从父元素继承字体尺寸。

    <div>
        你好-默认大小
    </div>
    <div style="font-size: 16px;">
        你好-单位px
    </div>
    <div style="font-size: larger;">
        你好-larger
    </div>
    <div style="font-size: smaller;">
        你好-smaller
    </div>

效果：
在这里插入图片描述

加粗font-weight

字体加粗font-weight的常用值：bold 粗体 ；bolder 比粗体更加粗。除此之外，font-weight值也可以是具体数值。

<body>
    <div>
        你好-没有font-weight
    </div>
    <div style="font-weight: normal;">
        你好-normal
    </div>
    <div style="font-weight: bold;">
        你好-bold
    </div>
    <div style="font-weight: bolder;">
        你好-bolder
    </div>
    <div style="font-weight: lighter;">
        你好-lighter
    </div>
</body>

效果：
在这里插入图片描述
常用值：
normal 缺省值。字体正常显示。
bold 粗体
bolder 比粗体更加粗
lighter 比正常字体淡
100 至少和200一样淡
200 至少和100一样粗，至少和300一样淡
300 至少和200一样粗，至少和400一样淡
400 字体正常显示，相当于normal。
500 至少和400一样粗，至少和600一样淡
600 至少和500一样粗，至少和700一样淡
700 粗体，相当于bold。
800 至少和700一样粗，至少和800一样淡
900 至少和800一样粗

文本属性

首航缩进text-indent

indent:vt. 缩进; 将(印刷或书写的行)缩格;

    <div>
        版权所有 (C) Microsoft Corporation。
        <br/>
        保留所有权利。
    </div>
    <div style="text-indent: 2em;">
        版权所有 (C) Microsoft Corporation。
        <br/>
        保留所有权利。
    </div>

效果：
在这里插入图片描述

文本水平对齐text-align

设置块级元素内文本的水平对齐方式，默认左对齐。
text-align常用值left、center、right、justify。
justify实际上是将每个单词的间距进行拉伸，以达到两端对齐的效果。
当标签中文本只有一行时，justify并没有生效。
实际上，justify会自动忽略文本的最后一行。justify的主要还是应用于大段文本的处理。

    <div style="width: 300px;height: 500px;border: solid 1px red;">
        <div>
            默认
            <br/>
            版权所有 (C) Microsoft Corporation。
            <br/>
            保留所有权利。
        </div>
        <div style="text-align: center;">
            居中
            <br/>
            版权所有 (C) Microsoft Corporation。
            <br/>
            保留所有权利。
        </div>
        <div style="text-align: left;">
            左对齐
            <br/>
            版权所有 (C) Microsoft Corporation。
            <br/>
            保留所有权利。
        </div>
        <div style="text-align: right;">
            右对齐
            <br/>
            版权所有 (C) Microsoft Corporation。
            <br/>
            保留所有权利。
        </div>
        <div>
            不使用justify。
            结果先前等宽对齐的最后三个图片就与上面元素垂直对齐且左对齐啦! 您可以狠狠地点击这里。
        </div>
        <div style="text-align: justify;">
            使用justify。
            结果先前等宽对齐的最后三个图片就与上面元素垂直对齐且左对齐啦! 您可以狠狠地点击这里。
        </div>
    </div>

效果：
在这里插入图片描述

文本垂直对齐vertical-align

设置元素的垂直对齐方式。
vertical-align属性只对行内元素有效，对块内元素无效。设置属性display:inline-block。
vertical-align常用值：sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 使元素及其后代元素的底部与整行的底部对齐。

<body>
    <!-- 顶部 -->
    <div style="width: 300px;height: 150px;border: solid 1px red">
            <span style="display: inline-block;font-size: 10px;vertical-align: top">默认</span>
            <img src="test.png" style="display: inline-block;height: 100px;width:100px;vertical-align: top;">
            <span style="display: inline-block;font-size: 30px;vertical-align: top">默认</span>
    </div>

    <!-- 中部 -->
    <div style="width: 300px;height: 150px;border: solid 1px blue">
        <span style="display: inline-block;font-size: 10px;vertical-align: middle">默认</span>
        <img src="test.png" style="display: inline-block;height: 100px;width:100px;vertical-align: middle;">
        <span style="display: inline-block;font-size: 30px;vertical-align: middle">默认</span>
    </div>

    <!-- 底部 -->
    <div style="width: 300px;height: 150px;border: solid 1px green">
        <span style="display: inline-block;font-size: 10px;vertical-align: bottom">默认</span>
        <img src="test.png" style="display: inline-block;height: 100px;width:100px;vertical-align: bottom;">
        <span style="display: inline-block;font-size: 30px;vertical-align: bottom">默认</span>
    </div>

    <!-- 原文 -->
    <div style="width: 300px;height: 100px;border: solid 1px red">
        <span style="display: inline-block;font-size: 16px;border: solid 1px blue">默认</span>
        <span style="display: inline-block;font-size: 16px;border: solid 1px blue">默认</span>
    </div>
    <!-- 下标 -->
    <div style="width: 300px;height: 100px;border: solid 1px red">
        <span style="display: inline-block;font-size: 16px;border: solid 1px blue">默认</span>
        <span style="display: inline-block;font-size: 16px;;border: solid 1px blue;vertical-align: sub">下标</span>
    </div>
    <!-- 上标 -->
    <div style="width: 300px;height: 100px;border: solid 1px red">
        <span style="display: inline-block;font-size: 16px;border: solid 1px blue">默认</span>
        <span style="display: inline-block;font-size: 16px;;border: solid 1px blue;vertical-align: super">上标</span>
    </div>
</body>

效果：
在这里插入图片描述

具体场景

要求文本自动换行不超过边框

之前：
在这里插入图片描述
加入样式：

        word-wrap:break-word;
        word-break:break-all;

实现效果：
在这里插入图片描述

JWbonze
关注
专栏目录
CSS中文本样式（详解网页文本样式）
百赢出品，必属精品
04-30 1515
CSS Text模块用于控制文本的外观和排版。它提供了一系列属性，允许开发者对文本进行格式化和布局，以实现各种视觉效果。文本样式属性：CSS提供了一系列属性来控制文本的外观，包括颜色、字体、大小、粗细等。这些属性包括colorfont-size等。文本对齐：通过text-align属性可以控制文本在其容器中的水平对齐方式，如左对齐、右对齐、居中对齐等。文本装饰：使用属性可以添加文本装饰效果，如下划线、删除线等。行高和间距属性用于设置行高，和属性分别控制字母和单词之间的间距。文本转换。
CSS 字体样式 文本样式
qq_42265536的博客
12-23 241
字体样式 字体类型：font-family 语法：font-family:字体1 , 字体2 , 字体3; 优先使用字体1，假设电脑不支持 字体1，会使用后面的 实例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;style type="tex...
HTML和CSS之移动端
weixin_47481936的博客
03-31 349
meta视口标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,user-scalable=no" /> <title></title> &lt
CSS中字体样式属性(3)
最新发布
2301_77110865的博客
05-10 756
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
中文字体在 CSS 中的写法
naxiaohuo的专栏
10-30 1506
中文字体在 CSS 中的写法 今天在折腾wordpress主题的时候，想把侧边栏上的2个标题转换为“方正姚体”，用Firebug调试OK了，保存到css文件里上传后，可是怎么弄也显示不对，网上搜索了一下，才知道原来在CSS中不能出现中文字体，解决办法就是把这些中文字体名字转换成英文名。 Unicode简单的说一下制作网页时的为了兼顾到一些浏览器CSS样式文档中一般是
css字体系列大全
無
09-28 9654
css字体系列大全
【CSS】CSS文本样式【CSS基础知识详解】
@花无缺
11-22 4852
CSS文本样式最全指南，打造精品前端知识体系，详细解释每一个文本样式相关属性的使用，让CSS的知识清晰明了，每一个属性都有对应的完整代码实例，0基础入门前端！
css文字控制与css文本样式示例和属性
09-25
简化的font属性写法可以在一行代码中设置多种文字样式属性，例如body {font: italic bold 18px/1.5 Arial, '汉仪行楷简';}。 二、CSS控制文本属性： 1. text-indent：该属性用于设置文本首行缩进。可以使用长度...
21.1 CSS 文字样式
08-17
在这个主题“21.1 CSS 文字样式”中，我们将深入探讨如何利用CSS来调整和美化网页中的文本元素。这包括字体选择、颜色设定、大小调整、行高、字母间距、对齐方式以及许多其他高级技术。 1. **字体家族**：CSS提供了...
CSS font-family 各字体一览表
吃不胖的程序猿历程
08-04 2万+
windows常见内置中文字体 字体中文名 字体英文名宋体                      SimSun（浏览器默认）黑体                      SimHei微软雅黑               Microsoft Yahei微软正黑体            Microsoft JhengHei楷体              ...
css设置各种中文字体如雅黑、宋体、楷体
日常笔记/总结/系列知识梳理
04-13 6万+
 .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu }   css如何设置各种中文字体如雅黑、黑体、宋体、楷体等等 说明： 加上中文名“微软雅黑”是为了兼容opera。 MicrosoftJhengHei为微软正黑体，STHeiti为华文黑体，MingLi...
Css font-family字体对照表
wuhulala的休息室
08-25 3万+
Css font-family字体对照表 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU
CSS字体样式
chouao0161的博客
05-09 310
华文细黑：STHeiti Light [STXihei] 华文黑体：STHeiti 华文楷体：STKaiti 华文宋体：STSong 华文仿宋：STFangsong 儷黑 Pro：LiHei Pro Medium 儷宋 Pro：LiSong Pro Light 標楷體：BiauK...
CSS font-family 各名称一览表
热门推荐
cc蒲公英的博客
04-25 12万+
windows常见内置中文字体 字体中文名 字体英文名 字体应用 宋体 SimSun（浏览器默认） 中文名 英文名 浏览器默认 黑体 SimHei 中文名 英文名 浏览器默认 微软雅黑 Microsoft Yahei 中文名 英文名 浏览器默认
CSS font-family字体大合集
weixin_30628077的博客
11-01 2057
在写文字内容占大篇幅的页面是，总是会面临着改变字体的需求，以下为font-family常用合集以及一部分文字效果： windows常见内置中文字体 字体中文名 字体英文名 效果实例 宋体 SimSun（浏览器默认） 夏目友人帐/ABCD...
CSS设置字体种类，如宋体，楷体，黑体，仿宋等等。。。。
VaPyl的博客
10-26 3万+
如：宋体,div里面设置字体样式 全局设置字体样式 字体样式的CSS表示大全 华文细黑：STHeiti Light [STXihei]  华文黑体：STHeiti  华文楷体：STKaiti  华文宋体：STSong  华文仿宋：STFangsong  儷黑 Pro：LiHei Pro Medium  儷宋 Pro：LiSong Pro Light 
Css之【字体系列】综合技巧总结（持续更新中...）
系统运维
10-05 102
一、CSS 字体系列 body {font-family: 宋体;} 二、斜体文本 该属性有三个值： normal - 文本正常显示 italic - 文本斜体显示 oblique - 文本倾斜显示 p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;...
用css如何写正方体,css3纯写的立方体
weixin_33846508的博客
08-03 498
.box {width:200px;height:200px;transform-style:preserve-3d;position:relative;margin:100px auto 20px;transform:rotateX(20deg) rotateY(20deg);cursor:pointer;transition:all 1s;}.box:hover {transform:rota...
CSS文字样式定义与链接效果
本文主要介绍了CSS中用于定义文字样式的常用代码，包括链接的不同状态、自定义类别的链接样式以及页面背景和字体设置。 在网页设计中，CSS（层叠样式表）是一种强大的工具，用于控制网页元素的外观和布局。在【标题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值