CSS基础-文字样式

字是网页展示的重要内容之一，所以对文字的修饰也是CSS重点关注的一部分， CSS提供了以下常用的样式属性来修饰文字。

color 属性

color 用来设置文字颜色。

设置方式支持以下几种格式

英语颜色单词形式，如: red（红）、black（黑）、orange（橙色）等。

<style>
  .box {
    color: red;
  }
</style>


<div class="box">文字颜色</div>

十六进制表示法，设计软件中通用的表示方法。
例如：ff00000; ff 即为十进制255；每种颜色分为 0~255的数字。
如果表示颜色值重复例如：#ffaabb 可以简写为#fab.。
黑色为 #000 ，白色为 #fff。
以#ff0000为例，两两分组，分别表示三原色：红、绿、蓝。

<style>
  .box {
    color: #ff0000;
  }
  .box1 {
    color: #f00;
  }
</style>


<div class="box">文字颜色</div>
<div class="box1">简写形式</div>

RGB 表示法
例如: color: rgb(255,0,0); rgb 内部的三个值，依次代表三原色红、绿、蓝。
其中 rgb(0,0,0) 代表黑色， rgb(255,255,255) 表示白色。

<style>
  .box {
    color: rgb(255, 0, 0);
  }
</style>
<div class="box">文字颜色</div>

RGBA 表示法，在RGB的表示方法的基础上增加了透明度（最后一个参数代表透明度）。0-表示透明 1-表示实心。透明度是介于[0,1]之间的值。
RGBA 从 IE9开始兼容。

<style>
.box {
  color: rgba(255, 0, 0, 0.5);
}
</style>




<div class="box">文字颜色</div>

font-size 属性

font-size 属性用来设置字体大小，单位通常为px 也可以为em,rem

单位的解释

px：像素
em: 相对元素字体的倍数
rem：相对html字体的倍数，例如：html标签设置为font-size为100px ， div 设置font-size为1.5 rem 实际表现为：150px。

<style>
  .box {
    font-size: 30px;
  }
</style>


<div class="box">文字大小</div>

font-weight 属性

设置字体的粗细程度，常用的属性有 normal 和 bold 两个值。

可以用以下值表示，也可以用数字表示。

值	意义
normal	正常粗细，和400值相等
bold	加粗，与700数值相等
lighter	比正常粗细还细，不常用
bolder	比加粗还粗，不常用
100 200 300 400 500 600 700 800 900	使用数字定义字体粗细
inherit	从父元素继承字体粗细

<style>
.box_normal {
  font-weight: normal;
}
.box_bold {
  font-weight: bold;
}


.box_lighter {
  font-weight: lighter;
}


.box_bolder {
  font-weight: bolder;
}


.box_number {
  font-weight: 600;
}
</style>


<body>
  <div class="box_normal">font-weight演示：正常粗细</div>
  <div class="box_bold">font-weight演示，加粗</div>
  <div class="box_lighter">font-weight演示，更细</div>
  <div class="box_bolder">font-weight演示， 更粗</div>
  <div class="box_number">font-weight演示， 数字</div>
</body>

font-style 属性

设置字体的倾斜程度

值	意义
normal	正常字体，不带倾斜效果
italic	倾斜字体（常用，使用倾斜字体）
oblique	倾斜字体（用常规字体模拟倾斜，不常用）

<style>
  .box1 {
    font-style: normal;
  }
  .box2 {
    font-style: italic;
  }
  .box3 {
    font-style: oblique;
  }
</style>
<body>
  <div class="box1">正常字体</div>
  <div class="box2">倾斜字体</div>
  <div class="box3">倾斜字体2</div>
</body>

text-decoration 属性

设置文本的修饰线的样式

示例	意义
none	无线(a标签去除下划线会用到)
underline;	下划线
line-through;	删除线
…等等	还有很多，可自行百度

<style>
  .decoration-none {
    text-decoration: none;
  }
  .decoration-underline {
    text-decoration: underline;
  }
  .decoration-line-through {
    text-decoration: line-through;
  }
</style>
<body>
  <div class="decoration-none">无线修饰</div>
  <div class="decoration-underline">下划线</div>
  <div class="decoration-line-through">删除线</div>
</body>

font-family 属性

指定使用的字体族，操作系统一般自带很多字体；

例如：window操作系统中的 ‘微软雅黑’ ，黑体等。

字体文件的格式有很多，比如 eot,woff2,woff,ttf,svg等。

font-family 可以一次指定多个字体，后面的字体属于后备字体，只有前面的字体没有找到，才会使用后面的字体。

<style>
  div {
      font-family: serif, "Time New Roman", "微软雅黑"
  }
</style>
<body>
  <div>字体</div>
</body>

自定义字体

某些时候，我们的字体比较个性化，或者我们的字体是一个图标字体（一种用符号表示图片的方式）。那么此时，需要我们使用 @font-face 自定义字体

自定义的字体一般是随着网页发布在服务器端，操作系统中并没有。

推荐一个比较好用的字体库网站：https://www.iconfont.cn/（具体使用方式请自行百度）。

融界2024年1月16日消息，据国家知识产权局公告，中信银行股份有限公司申请一项名为“一种基于iText的支持生僻字转换方法及系统”的专利，公开号CN117408230A，申请日期为2023年10月。

专利摘要显示，本发明提供了一种基于iText的支持生僻字转换方法及系统，涉及人工智能技术领域。其中，所述方法包括：获得生僻字字库；获得常规字字库；将所述生僻字字库与所述常规字字库进行组合，获得字库集合；根据所述字库集合对HTML进行字体样式设定，获得HTML信息；将所述字库集合设置到iText中，调用所述iText对所述HTML信息进行PDF转换，获得转换文件。解决了现有技术中存在遇到生成含有生僻字的HTML转换PDF场景时，无法正常完成生僻字转换，出现生僻字变为乱码，且使用升级现有中文字字库的方法不能随时新增生僻字，灵活性差的技术问题。

本文源自金融界

谓HSL

HSL色彩模式：就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色，色调(Hue)色调最大值360，饱和度和亮度有百分比表示0-100%之间。

因为人们看到颜色第一时间会产生“这是什么颜色？深浅如何？明暗如何？”这个疑问不是这是多少红加多少绿多少蓝混合而成的颜色，所以HSL色彩模式是人类对颜色最直接的感知。
HSL(H,S,L)

取值：

H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%

兼容性：

HSL被现代浏览器较好的支持，而且不需要任何前缀，IE6-IE7不支持。IE8支持该方式。

实例1:在css中直接使用hsl值

<style>.test{background-color:hsl(360,50%,50%);}</style>

实例2：使用Js修改dom时指定hsl值，以亮度为例
html:

    <style>        body {            padding: 100px;        }         #ex1Slider .slider-selection {            background: #BABABA;        }    </style>    <div class="form">        <div class="form-group">            <label for="">亮度：</label>            <input id="ex1" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="15" />        </div>    </div>

//亮度$('#ex1').slider().on('change', function (e) {    var newValue=e.value.newValue;    console.info(newValue);    $(document.body).css({        backgroundColor: 'hsl(360,50%,' + newValue + '%)'    });});

完整代码：

<!doctype html><html lang="zh-CN"><head><title>动态hsl调整背景色</title><meta name="Generator" content="Zoomla!逐浪?CMS"><meta name="Author" content="去上云73ic.com"><meta name="Others" content="字体呈现基于逐浪字库f.ziti163.com"><meta name="Keywords" content=""><meta name="Description" content=""><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  <link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script></head><body><style>body {    padding: 100px;}#ex1Slider .slider-selection {background: #BABABA;}</style><h1>动态hsl调整背景色</h1><div class="form">    <div class="form-group">        <label for="">亮度：</label>        <input id="ex1" data-slider-id="ex1Slider" type="text"               data-slider-min="0" data-slider-max="100" data-slider-step="1"               data-slider-value="15" />    </div></div><script>//亮度$('#ex1').slider().on('change', function (e) {    var newValue=e.value.newValue;    console.info(newValue);    $(document.body).css({        backgroundColor: 'hsl(360,50%,' + newValue + '%)'    });});</script>  </body></html>

效果如下：

实例3：修改多个值：
html:

<style>        body {            padding:100px;        }        .form-group {            margin-bottom:50px;        }        #ex1Slider .slider-selection {            background: #BABABA;        }    </style>    <div class="form">        <div class="form-group">            <label for="">色?调：</label>            <input id="Hue" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="360" data-slider-step="1"                   data-slider-value="180" />        </div>        <div class="form-group">            <label for="">饱和度：</label>            <input id="Saturation" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>        <div class="form-group">            <label for="">亮?度：</label>            <input id="Lightness" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>    </div>

js:

//色调$('#Hue').slider().on('change', function (e) {    showColor();});//饱和度$('#Saturation').slider().on('change', function (e) {    showColor();});//亮度$('#Lightness').slider().on('change', function (e) {    showColor();});//统一显示颜色function showColor() {    var h=$('#Hue').slider('getValue');    var s=$('#Saturation').slider('getValue');    var l=$('#Lightness').slider('getValue');    var value='hsl(' + h + ',' + s + '%,' + l + '%)';    console.info(value);    $(document.body).css({        backgroundColor:value    });}showColor();

完整代码：

<!doctype html><html lang="zh-CN"><head><title>新建HTML</title><meta name="Generator" content="Zoomla!逐浪?CMS"><meta name="Author" content="去上云73ic.com"><meta name="Others" content="字体呈现基于逐浪字库f.ziti163.com"><meta name="Keywords" content=""><meta name="Description" content=""><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  <link href="https://cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <script src="https://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script></head><body><h1>动态hsl调整背景色@多值</h1> <style>        body {            padding:100px;        }        .form-group {            margin-bottom:50px;        }        #ex1Slider .slider-selection {            background: #BABABA;        }    </style>    <div class="form">        <div class="form-group">            <label for="">色?调：</label>            <input id="Hue" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="360" data-slider-step="1"                   data-slider-value="180" />        </div>        <div class="form-group">            <label for="">饱和度：</label>            <input id="Saturation" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>        <div class="form-group">            <label for="">亮?度：</label>            <input id="Lightness" data-slider-id="ex1Slider" type="text"                   data-slider-min="0" data-slider-max="100" data-slider-step="1"                   data-slider-value="50" />        </div>    </div> <script>//色调$('#Hue').slider().on('change', function (e) {    showColor();});//饱和度$('#Saturation').slider().on('change', function (e) {    showColor();});//亮度$('#Lightness').slider().on('change', function (e) {    showColor();});//统一显示颜色function showColor() {    var h=$('#Hue').slider('getValue');    var s=$('#Saturation').slider('getValue');    var l=$('#Lightness').slider('getValue');    var value='hsl(' + h + ',' + s + '%,' + l + '%)';    console.info(value);    $(document.body).css({        backgroundColor:value    });}showColor();</script></body></html>

在线咨询

上一篇：梁韦诺：在香港变局下读金庸《香港的前途》
下一篇：必考知识点-JavaScript类型转换（讲原理）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商