经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
字体
来源：cnblogs　　作者：Liwker　　时间：2020/12/21 14:47:17　　对本文有异议

color

color 前景色，通常用来设置字体的颜色

颜色单位

在CSS中可以直接使用颜色名来设置各种颜色
比如：red、orange、yellow、blue、green ... ...
但是在css中直接使用颜色名是非常的不方便

RGB值

RGB通过三种颜色的不同浓度来调配出不同的颜色
R red，G green ，B blue
每一种颜色的范围在 0 - 255 (0% - 100%) 之间

语法：RGB(红色,绿色,蓝色)
e.g. color: rgb(250,80,100);

Hello World!

RGBA

就是在rgb的基础上增加了一个a表示不透明度
需要四个值，前三个和rgb一样，第四个表示不透明度
1表示完全不透明 0表示完全透明 .5半透明

e.g. color: rgba(250,80,100,.5);

Hello World!

十六进制的RGB值

语法：#红色绿色蓝色
颜色浓度通过 00-ff

如果颜色两位两位重复可以进行简写
#bbffaa --> #bfa

e.g. color: #bfa 护眼豆沙绿

Hello World!

HSL值 HSLA值

H 色相(0 - 360)

S 饱和度，颜色的浓度 0% - 100%

L 亮度，颜色的亮度 0% - 100%

A 不透明度

e.g. color: hsla(98,48%,40%,0.658);

Hello World!

font-size

font-size 设置字体的大小

字体大小单位

像素

屏幕（显示器）实际上是由一个一个的小点点构成的
不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
所以同样的20px在不同的设备下显示效果不一样

而网页字体默认的大小为 16px

e.g. font-size: 25px;

Hello World!

em

em 是相对于元素的字体大小来计算的

1em = 1*font-size

em 相当于当前元素的一个font-size

rem

rem 是相对于根元素的字体大小来计算

rem 相对于根元素的一个 font-size（16px）

font-family

font-family 字体族（字体的格式）

可选值：

  1. serif 衬线字体类

    你好世界 Hello World

  2. sans-serif 非衬线字体类

    你好世界 Hello World

  3. monospace 等宽字体类

    你好世界 Hello World

除了这些，还有像 cursive fantasy 之类不常用的字体类

上面这些值是指定字体的类别，浏览器会自动使用该类别下的字体


font-family 可以同时指定多个字体，多个字体间使用 , 隔开

字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推

@font-face

可以将服务器中的字体直接提供给用户去使用

  1. @font-face {
  2.     /* 指定字体的名字 */
  3.     font-family:'myfont' ;
  4.     /* 服务器中字体的路径 */
  5.     src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
  6.     /* format 指定字体文件格式，一般都不用写 */
  7. }
  9. p {
  10.     font-family: myfont;
  11. }

可能会有些问题：

  • 加载速度
  • 版权
  • 字体格式
    .ttf woff 之类的

图标字体（iconfont）

在网页中经常需要使用一些图标，可以通过图片来引入图标
但是图片大小本身比较大，并且非常的不灵活
所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入

这样我们就可以通过使用字体的形式来使用图标

引用图标有3中方式：（下面会讲到）

  1. 引用类
  2. 实体
  3. 设置伪元素

fontawesome

fontawesome 使用步骤

  1. 下载 https://fontawesome.com/
  2. 解压
  3. 将 css 和 webfonts 移动到项目中，必须在同一级目录下
  4. 将 all.css (或 all.min.css) 引入到网页中
  5. 使用图标字体

直接通过类名来使用图标字体

class="fas fa-bell"

class="fab fa-accessible-icon"

fas 和 fab 是设置字体格式，后面的就是详细的那种图标

注意：fas 和 fab 是免费的

  1. <!-- 通常用 i 标签来创建图标元素 -->
  2. <!-- 可以根据需要，来调整图标的大小，颜色等样式 -->
  3. <i class="fas fa-bell" style="font-size:80px; color:red;"></i>
  4. <i class="fas fa-bell-slash"></i>
  5. <i class="fab fa-accessible-icon"></i>	<!-- otto -->
  6. <i class="fas fa-otter" style="font-size: 160px; color:green;"></i>

image-20201219173859294


其他引用方式

  1. <head>
  2.     <link rel="stylesheet" href="./fa/css/all.css">
  3.     <style>
  4.         li{
  5.             list-style: none;
  6.         }
  8.         /* 通过设置伪类的方式使用图标 */
  9.         li::before{
  10.             content: '\f1b0';
  11.             /*font-family: 'Font Awesome 5 Brands'; */	/* fab */
  12.             font-family: 'Font Awesome 5 Free';	
  13.             font-weight: 900; /* fas */
  14.             color: blue;
  15.             margin-right: 10px;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  21.     <!-- <i class="fas fa-cat"></i> -->
  23.     <ul>
  24.         <li>锄禾日当午</li>
  25.         <li>汗滴禾下土</li>
  26.         <li>谁知盘中餐</li>
  27.         <li>粒粒皆辛苦</li>
  28.     </ul>
  30.     <!-- 
  31. 		<span class="fas fa-bell"></span>
  32. 		除了引用类的方式
  33.         还可以通过实体来使用图标字体：
  34.         格式：	&#x图标的编码;
  35.      -->
  36.     <span class="fas">&#xf0f3;</span>
  37.     
  38. </body>

image-20201219175425942

阿里图标库

阿里图标库里面有很多图标，使用方式和上面的 fontawesome 差不多

https://www.iconfont.cn/

打开主页，搜索或者查看需要的图标，加至购物车，然后导入项目，查看此项目，可以下载到本地，也可以使用在线的 css（推荐）

  1. <head>
  2.     <meta charset="UTF-8" />
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  4.     <title>Document</title>
  5.     <link rel="stylesheet" href="//at.alicdn.com/t/font_2280834_a3jjthi2f8.css"/>
  6.     <style>
  7.         .iconfont {
  8.             font-size: 50px;
  9.             color: red;
  10.         }
  11.         p::before {
  12.             content: "\e600";
  13.             font-family: "iconfont";
  14.             font-size: 100px;
  15.             color: red;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <i class="iconfont icon-like"></i>	<!-- 引用类 -->
  21.     <i class="iconfont">&#xe600;</i>	<!-- 实体 -->
  22.     <p>LOVE</p>	<!-- 设置伪元素 -->
  23. </body>

效果：

image-20201219190242824

行高

行高（line-height）

行高指的是文字占有的实际高度
可以通过 line-height 来设置行高

行高可以直接指定一个大小（px emd 等）

也可以直接为行高设置一个整数（默认是 line-height: 1.33;）
如果是一个整数的话，行高将会是字体的指定的倍数


字体框

字体框就是字体存在的格子，设置 font-size 实际上就是在设置字体框的高度

行高会在字体框的上下平均分配

可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中

  1. div {
  2.     font-size: 50px;
  3.     height: 200px; /* 可以不写 */
  4.     line-height: 200px;
  5.     border: 1px red solid;
  6. }

image-20201220163435010


  1. div {
  2.     font-size: 50px;
  3.     height: 30px;
  4.     border: 1px red solid;
  5. }

image-20201220163859284


  1. div {
  2.     font-size: 50px;
  3.     line-height: 30px;
  4.     border: 1px red solid;
  5. }

image-20201220164025293

行高经常还用来设置文字的行间距

行间距 = 行高 - 字体大小

  1. div {
  2.     font-size: 50px;
  3.     line-height: 200px;
  4.     border: 1px red solid;
  5. }

image-20201220162358035

字体简写属性

font

font 可以设置字体相关的所有属性

语法：

font: 字体大小/行高 字体族 （字体大小 和 字体族 是必须写的）
行高 可以省略不写 如果不写使用默认值（line-height: normal;）

e.g.

  1. font: 50px/2  微软雅黑, 'Times New Roman', Times, serif;
  1. div {
  2. 	line-height: 2;
  3. 	font: 50px 微软雅黑, 'Times New Roman', Times, serif;
  4. 	/* 此时呢，上面的 line-height: 2; 就失效了，因为后面的 font 给覆盖了成了 normal（默认值）*/
  5.     /* 解决这种情况，要么在 font 内设置，要么把 line-height 放到下面来 */
  6. }

font-weight

font-weight 字重 字体的加粗

可选值：

  • normal 默认值 不加粗
  • bold 加粗
  • lighter 减细
  • 100-900 九个级别（一般没什么用，因为字体文件里一般都有 正常 normal 和 加粗 bold 的字体，所以这些几百的级别都没作用）

font-style

font-style 字体的风格

  • normal 正常的
  • italic 斜体

上面这俩属性也可以加到 font 里，这俩的顺序无所谓，但要放在最前面

  1. div {
  2.     border: 1px red solid;
  3.     font-weight: normal;	/* 因为下面覆盖设置了，所以这个会失效 */
  4.     font: bold italic 50px/2  微软雅黑, 'Times New Roman', Times, serif;
  5. }

image-20201220165552070

文本的样式

text-align

text-align 文本的水平对齐

可选值：

  1. left 左侧对齐（默认值）
  2. right 右对齐
  3. center 居中对齐
  4. justify 两端对齐

left

image-20201220171902258

right

image-20201220171925455

center

image-20201220171946523

justify

image-20201220172025102

vertical-align

vertical-align 设置元素垂直对齐的方式

可选值：

  1. baseline 默认值 基线对齐
  2. top 顶部对齐
  3. bottom 底部对齐
  4. middle 居中对齐（一般不是我们所谓的居中）
  5. 具体值 e.g. vertical-align: 100px; 正数向上，负数向下
  1. <style>
  2.     div {
  3.         width: 800px;
  4.         border: 1px red solid;
  5.         font-size: 50px;
  6.     }
  8.     span {
  9.         font-size: 20px;
  10.         border: 1px blue solid;
  11.         vertical-align: baseline;
  12.     }
  13. </style>
  14. <div>今天天气 Helloyx <span>真不错 Hello</span> ！</div>

image-20201220173514368

  1. <style>
  2.     p {
  3.         border: 1px red solid;
  4.     }
  6.     img {
  7.         vertical-align: bottom;
  8.         /* 图片是带 基线 baseline的，所以在默认垂直对齐下，图片与父元素边框（被撑开的情况下）下面会有一段空隙 */
  9.         /* 消除这段空隙的解决办法就是设置 非 baseline 值的 vertical-align */
  10.     }
  11. </style>    
  12. <p>
  13.     <img src="./img/an.jpg" alt="" />
  14. </p>

不设置 vertical-align

image-20201220174315853

设置了非 baseline 值的 vertical-align

image-20201220174235483

text-decoration

text-decoration 设置文本修饰

值：

  1. text-decoration-color 修饰线的颜色
  2. text-decoration-line 修饰线的位置
  3. text-decoration-style 修饰线的样式
  4. text-decoration-thickness 修饰线的粗细

这些值都可以简写到 text-decoration 里

text-decoration-line 可选值：

  • none 什么都没有
    Hello World!

  • underline 下划线

    Hello World!

  • line-through 删除线

    Hello World!

  • overline 上划线

    Hello World!

text-decoration-style 可选值：

  • solid 单实线

    Hello World!

  • double 双实线

    Hello World!

  • dotted 点线

    Hello World!

  • dashed 虚线

    Hello World!

  • wavy 波浪线

    Hello World!

注意：这些值IE可能不支持

white-space

white-space 设置网页如何处理空白

可选值：

  1. normal 正常，换行
  2. nowrap 不换行
  3. pre 保留空白

normal

  1. <style>
  2.     .box2{
  3.         width: 200px;
  4.         border: 1px red solid;
  5.         white-space: normal;
  6.     }
  7. </style>
  8. <div class="box2">
  9.     Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,
  10.     minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat
  11.     cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt
  12.     numquam. Dolores, cupiditate enim.
  13. </div>
  15. <div class="box1">
  16.     今天天气真不错
  17. </div>

image-20201220181602102

pre

  1. <style>
  2.     .box2{
  3.         width: 200px;
  4.         border: 1px red solid;
  5.         white-space: pre;
  6.     }
  7. </style>
  8. <div class="box2">
  9.     Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,
  10.     minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat
  11.     cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt
  12.     numquam. Dolores, cupiditate enim.
  13. </div>
  15. <div class="box1">
  16.     今天天气真不错
  17. </div>

image-20201220181647297

nowrap

  1. <style>
  2.     .box2{
  3.         width: 200px;
  4.         border: 1px red solid;
  5.         white-space: nowrap;
  6.     }
  7. </style>
  8. <div class="box2">
  9.     Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,
  10.     minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat
  11.     cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt
  12.     numquam. Dolores, cupiditate enim.
  13. </div>
  15. <div class="box1">
  16.     今天天气真不错
  17. </div>

image-20201220181832724

实现多余的文字用省略号 ...

  1. <style>
  2.     .box2{
  3.         border: 1px red solid;
  4.         width: 200px;	/* 显示文字的宽度 */
  5.         white-space: nowrap;	/* 文字不换行 */
  6.         overflow: hidden;	/* 超出的不显示 */
  7.         text-overflow: ellipsis;	/* 显示省略符号来代表被修剪的文本 */
  8.         /* 缺一不可 */
  9.     }
  10. </style>
  11. <div class="box2">
  12.     Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur,
  13.     minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat
  14.     cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt
  15.     numquam. Dolores, cupiditate enim.
  16. </div>
  18. <div class="box1">
  19.     今天天气真不错
  20. </div>

image-20201220182019952

原文链接：http://www.cnblogs.com/Liwker/p/14160549.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号