【CSS】文本属性、字体属性

最新推荐文章于 2024-04-14 23:17:40 发布
最新推荐文章于 2024-04-14 23:17:40 发布
阅读量868 收藏 2
点赞数
文章标签： css 前端 css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44895385/article/details/122517320
版权

文章目录

一、color属性

color属性可设置文本内容的前景色，color属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法。

英语单词表示法

比如color: red;，仅仅用于学习时临时设置一下颜色，工作时基本不用这样的形式，因为追求精确。

十六进制表示法

十六进制表示法是所有设计软件中都通用的颜色表示法，设计师给我们的设计图上面标注的颜色，通常为十六进制表示。
color: #ff0000;比如十六进制ff就是十进制的255，每种颜色分量都是0~255的数字。如果颜色值是#aabbcc的形式，可以简写为#abc。黑色是#000，白色是#fff，常见的灰色有#ccc、#333、 #2f2f2f等。

rgb()表示法

颜色也可以用rgb()表示法，color: rgb(255, 0, 0);

rgba()表示法

颜色也可以用rgba()表示法，最后一个参数表示透明度，介于0到1之间，0表示纯透明，1表示纯实心，color: rgba(255, 0, 0, .65);，rgba()表示法从IE9开始兼容。

二、font-size属性

font-size属性用来设置字号，单位通常为px。还有em、rem单位。

font-size: 30px;

网页文字正文字号通常是16px，浏览器最小支持10px字号

三、font-weight属性

font-weight属性设置字体的粗细程度，通常就用normal和bold两个值

示例意义
font-weight: normal;正常粗细，与400等值
font-weight: bold;加粗，与700等值
font-weight: lighter;更细，大多数中文字体不支持
font-weight: bolder;更粗，大多数中文字体不支持

四、font-style属性

font-style属性设置字体的倾斜

示例意义
font-style: normal;取消倾斜，比如可以把天生倾斜的i、 em等标签设置为不倾斜
font-style: italic;设置为倾斜字体（常用）
font-style: oblique;设置为倾斜字体（用常规字体模拟， 不常用）

五、text-decoration属性

text-decoration属性用于设置文本的修饰线外观的（下划线、删除线）

示例意义
text-decoration: none;没有修饰线
text-decoration: underline;下划线
text-decoration: line-through;删除线

六、使用案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 字体颜色和背景颜色 */
        .para1 {
            color: brown;
        }

        .para2 {
            color: #ff3366;
        }

        .para3 {
            color: #f36;
        }

        .para4 {
            background-color: #f36;
            color: #fff;
        }

        .para5 {
            color: rgb(255, 0, 0);
        }

        .para6 {
            color: rgba(255, 0, 0, 0.1);
        }

        /* 字体加粗 */
        .para7 {
            font-weight: bold;
            /* 或者 font-weight: 700; */
        }

        h3 {
            font-weight: normal;
            /* 或者 font-weight: 400;*/
        }

        /* 字体倾斜 */
        .para8 {
            font-style: italic;
        }

        i {
            font-style: normal;
        }

        /* 下划线 */
        .para9 {
            text-decoration: underline;
        }

        a {
            text-decoration: none;
        }

        /* 删除线 */
        .para10 {
            text-decoration: line-through;
        }
    </style>
</head>

<body>

    <p class="para1">窗前明月光，疑是地上霜</p>
    <p class="para2">窗前明月光，疑是地上霜</p>
    <p class="para3">窗前明月光，疑是地上霜</p>
    <p class="para4">窗前明月光，疑是地上霜</p>
    <p class="para5">窗前明月光，疑是地上霜</p>
    <p class="para6">窗前明月光，疑是地上霜</p>
    <p class="para7">窗前明月光，疑是地上霜</p>
    <h3>窗前明月光，疑是地上霜</h3>
    <p class="para8">窗前明月光，疑是地上霜</p>
    <i>窗前明月光，疑是地上霜</i>
    <p class="para9">窗前明月光，疑是地上霜</p>
    <a href="">窗前明月光，疑是地上霜</a>
    <p class="para10">窗前明月光，疑是地上霜</p>

</body>

</html>

以上代码显示的效果：
在这里插入图片描述

七、font-family属性

font-family属性用于设置字体，font-family: "微软雅黑";，字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体 font-family: serif, "Times New Roman", "微软雅黑";（字体名称中有空格，必须用引号包裹）

中文字体也可以称呼它们的英语名字
中文字体名 等价的英语字体名

font-family: "微软雅黑"
font-family: "Microsoft Yahei"

font-family: "宋体"
font-family: "SimSun"

字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置成其他字体较少，必须自己定义新字体，这就需要我们有字体文件，用户加载网页的时候，会同时下载这些字体文件

八、定义字体

字体文件根据操作系统和浏览器不同，有eot、woff2、woff、ttf、svg文件格式，需要同时有这5种文件

当我们拥有字体文件之后，就可以用@font-face定义字体

@font-face {
    font-family: '字体名称';
    font-display: swap;
    src: url('eot字体文件地址');
    src: url('eot字体文件地址') format('embedded-opentype'),
        url('woff2字体文件地址') format('woff2'),
        url('woff字体文件地址') format('woff'),
        url('ttf字体文件地址') format('truetype'),
        url('svg字体文件地址') format('svg');
}

阿里巴巴普惠体

阿里巴巴提供了一套免费商用授权的普惠字体，网址：https://www.iconfont.cn/webfont
使用阿里巴巴普惠字体也省去了下载字体的麻烦

如果线上字体包含所有中文汉字的话，加载网页速度的时间会变慢，所以可以生成自己想要的文本的字体，一般用来做标题等等，正文内容不是很建议使用

在这里插入图片描述
在编辑框中输入想要生成的汉字，再选择自己想要的字体，点击生成即可

在这里插入图片描述

点击引用线上地址，复制这串代码加到自己的页面中即可

在这里插入图片描述
也可以下载到本地，导入项目中使用
在这里插入图片描述

九、使用案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 定义线上字体 */
        @font-face {
            font-family: 'webfont';
            font-display: swap;
            src: url('//at.alicdn.com/t/webfont_xxi47bmh3ko.eot');
            /* IE9*/
            src: url('//at.alicdn.com/t/webfont_xxi47bmh3ko.eot?#iefix') format('embedded-opentype'),
                /* IE6-IE8 */
                url('//at.alicdn.com/t/webfont_xxi47bmh3ko.woff2') format('woff2'),
                url('//at.alicdn.com/t/webfont_xxi47bmh3ko.woff') format('woff'),
                /* chrome、firefox */
                url('//at.alicdn.com/t/webfont_xxi47bmh3ko.ttf') format('truetype'),
                /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('//at.alicdn.com/t/webfont_xxi47bmh3ko.svg#杨任东竹石体-Bold') format('svg');
            /* iOS 4.1- */
        }

        /* 导入本地本地字体  就是将上面的路径换成本地路径 */
        @font-face {
            font-family: 'webfont2';
            font-display: swap;
            src: url('fonts/webfont.eot');
            /* IE9*/
            src: url('fonts/webfont.eot') format('embedded-opentype'),
                /* IE6-IE8 */
                url('fonts/webfont.woff2') format('woff2'),
                url('fonts/webfont.woff') format('woff'),
                /* chrome、firefox */
                url('fonts/webfont.ttf') format('truetype'),
                /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('fonts/webfont.svg') format('svg');
            /* iOS 4.1- */
        }

        .para1 {
            font-family: '宋体';
        }

        .para2 {
            font-family: '微软雅黑';
        }

        .para3 {
            font-family: 'SimSun';
        }

        .para4 {
            font-family: 'Microsoft Yahei';
        }

        .para5 {
            /* 中文字体放后面 */
            font-family: 'Times New Roman', serif, 'Microsoft Yahei';
        }

        .para6 {
            font-family: 'webfont';
        }

        .para7 {
            font-family: 'webfont2';
        }
    </style>
</head>

<body>

    <p class="para1">arbor乔木先生</p>
    <p class="para2">arbor乔木先生</p>
    <p class="para3">arbor乔木先生</p>
    <p class="para4">arbor乔木先生</p>
    <p class="para5">arbor乔木先生</p>
    <p class="para6">arbor乔木先生</p>
    <p class="para7">arbor乔木先生</p>


</body>

</html>

以上html文件的预览效果
在这里插入图片描述

VincentHu_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
设置字体、字号等格式属性
onlyshi的专栏
08-19 1702
设置字体、字号等格式属性在工具栏上设置文字字体、字号大小、加粗、斜体、下划线以及字体颜色等快捷按钮。
css字体属性及文本属性
cunjicsdn的专栏
05-19 269
1、字体属性 font-size：字号，单位为像素（px） font-family：字体格式，工作中团队一般有约定的格式，如：微软雅黑（font-family:Microsoft YaHei） font-weight：字体粗细，加粗是700，不加粗是400，不跟单位 font-style：字体样式，倾斜是italic，不倾斜是normal font：复合样式，样式有顺序（font:font-style font-weight font-size/line-height font-family），字号和字体格
保姆级教程 CSS 知识点梳理大全，超详细！！！
2401_84094868的博客
04-14 1029
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。0eae0.png?（十二）— background-position属性自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
CSS常用技巧
Crayonxin2000的博客
02-28 867
css3的技巧
如何在项目中引入字体库（如阿里巴巴普惠体）
qq_36821274的博客
06-23 7023
如何在项目中引入字体库（如阿里巴巴普惠体）
CSS基础之字体、文本的基础设置
拄着拐儿唱儿歌的博客
01-13 2260
CSS基础之字体、文本的基础设置
CSS字体属性全解析
12-13
话说CSS字体属性font-family、font-style、font-size、font-weight、font-variant： 使用CSS，可以对字体进行设置，字体属性包括五种常见属性：字体系列font-family、字体样式/字体风格font-style、字体大小font-...
CSS 字体属性font相关的用法
09-25
这个属性并不属于字体属性，而是CSS文本属性的一部分。 通过灵活运用这些CSS字体属性，我们可以创造出各种各样的文本样式，以满足网页设计的需求。在实际应用中，还需要考虑不同浏览器的兼容性和用户的阅读体验，...
CSS字体、文本、列表属性详细介绍
01-19
1.字体属性 　color，规定文本的颜色，如 div{color:red;} 　font-style，规定文本显示方式，如 p.normal {font-style: normal;} ，有normal（正常显示）、italic（斜体显示，字体结构有一定变化）、oblique（倾斜...
Web前端与移动开发之css字体属性.txt
07-30
1.font-family 文本的字体 选择器 { font-family: 字体1，字体2，字体3； } 各个字体之间必须用英文状态下的逗号隔开 尽量使用默认字体 以保证不同浏览器能正确显示 一般整个页面使用同一字体 写在body后面 ...
详解CSS中的字体属性的使用
09-24
在CSS（层叠样式表）中，字体属性是用于控制元素文本显示的关键组成部分。这些属性允许开发者精细调整网页上的文字样式，包括字体的选择、大小、样式、粗细以及各种变体。下面我们将深入探讨这些属性及其用法。 ...
阿里巴巴普惠体最新版
04-28
为确保字体文件不被篡改，保障用户可以安全使用，请放心使用，最新版
css对字符的操作小结
tony19890820的专栏
06-24 715
0.一个小综合 1.让文字居中 style里text-align： text-align:center; left、right 和 center  2.强制改变文字在td里的位置 text-indent:50px;   line-height:40px;---------距离边框
阿里巴巴普惠体获取方式：
weixin_39054337的博客
04-29 1283
阿里巴巴普惠体获取方式： Alibaba ICS（淘宝用户登入）： https://ics.alibaba.com/project/Hn8mXx 商家服务市场（淘宝天猫商家 & 淘宝用户）： https://alibabafont.taobao.com/@TOC ...
阿里巴巴普惠字体下载链接
宋大王的博客
04-29 3060
阿里巴巴普惠字体下载链接 https://alibabafont.taobao.com/
CSS font-size字体相关
m0_64335839的博客
01-24 1270
字体大小 属性名：front-size 取值：数字+px 注意点：谷歌浏览器的默认值是16px，单位需要设置，否则是无效的。 <style> p{ font-size: 30px; } </style> </head> <body> <p>今天也要加油啊！！！</p> </body> 字体粗细 属性名：font-weight 关键字取值
【CSS】CSS选择器
林伊的博客
12-09 489
CSS选择器 1.标签名选择器 标签名选择器的样式是： 标签名{ 属性：值； } 标签名选择器可以决定那些标签被动的使用这个样式。 例：给所有的div标签上修改字体颜色为蓝色，字体大小为30个像素，边框为1像素红色实线。 给所有的span标签上修改字体颜色为红色，字体大小为20个像素，边框为5像素蓝色虚线。 <styletype="text/css"> div{ border:1px solid red; color:blue; fon...
css常用的文本属性
最新发布
05-16
CSS中常用的文本属性有以下几种： 1. font-family：设置字体族名称。可以设置多个字体，以确保在用户电脑中存在的字体可用时使用。 2. font-size：设置字体大小。 3. font-weight：设置字体粗细。 4. color：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

VincentHu_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值