言

近期，三大主流浏览器引擎均发布最新版本，支持W3C的CSS Color 4标准，包含新的取色方法color()和相应语法，可展示更多的色域及色彩空间，这意味着web端能展示更丰富更高清的色彩。虽然目前只有最新版本的现代浏览器才支持，我们可以先提前了解一下这项新标准。

本文首先会先简单介绍几个色彩的基础概念，了解为何需要新标准，之后会介绍新标准中的方法和语法使用。

基础概念

色域（color gamut）

指颜色的可选范围。如sRGB色域，目前web广泛应用的色域标准，使用红（red）绿（green）蓝（blue）作为基础色，色值范围0~255，三种基础色互相混合起来可展示255*255*255种颜色，这大致可理解为sRGB的色域。

现代web css使用的sRGB色域仅满足基础性的色彩需求，能展示的色彩范围远小于人类肉眼所能感知的颜色范围，也远低于高清展示的要求。

以下是sRGB与其他几种色域标准的色值范围大小比较：

以下是sRGB与人类肉眼可感知的色域比较：

色彩空间（color space）

色彩空间可以理解为一个基于某一色域标准下构建的空间数学模型，例如一些简单的方块、圆柱的3D模型，可以用来标记出色域中每个颜色的空间位置，各个颜色之间的关系等。

再用sRGB举例，红（red）绿（green）蓝（blue）三种基础色可设置为3个直线坐标轴，每种颜色便可标记为这个立方体中的一个点，在css中便是使用rgb()方法来取色，参数为指定颜色在色彩空间中的坐标(R, G, B)。

再再比如css的另一个取色方法hsl()，使用的是一套完全不同的色彩空间HSL，H色相（hue）是取值范围为0~360的角度，可作为角轴；S饱和度（Saturation）和L亮度（Lightness）作为两个直线轴，可构建为一个圆柱形的空间，css中使用hsl(H, S, L)表示颜色。

一种色域标准可以使用不同的色彩空间来描述，不同的色域标准也可以使用的是同一类的色彩空间表示。例如sRGB可以使用rgb()、hsl()、hwb()等方式进行描述，而像Display-P3、Rec2020色域都可以使用（R，G，B）的色彩空间来描述，只是空间的边界范围有所不同。

为什么要支持高清色彩

高清意味着更高范围的色域，让我们先直观感觉一下窄色域与广色域的视觉差距：

在实际的css颜色取值中，我们常用的方法有很多rgb()、rgba()、hsl()、hwb()，对应不同的色彩空间，但取的都是同一色域范围内的颜色，即sRGB，大概只能展示人类肉眼可感知的色彩中的30%，仿佛在使用一台90年代的电视机播放4K电影。

虽然目前的网络显示设备很多还是sRGB标准，并不支持显示更广色域标准的色彩，仅部分HDR显示器、或视频录制设备、电影制造中使用了如Display P3这类更广的色域标准。但对于高清的需求只会越来越多，支持更广色域标准注定也是未来web端显示的目标之一。

为应对这一趋势，W3C的CSS Color 4标准定义了新方法color()和其他语法能更灵活的指定各种不同色域标准下的颜色，以及更好的色彩渐变展示。最近，主流三大web浏览器也都已支持了W3C的新标准。

CSS Color 4

回顾现有的色彩空间

2000年以来，我们有多种方式指定色值：hex色值（#rgb、#rrggbb）、rgb()、rgba()、或是一些特定颜色的字符（如white、pink等）；2010年左右开始，浏览器开始支持hsl()方法；2017年，hex色值扩展了对于透明度的支持，#rrggbbaa；之后各种浏览器又陆续增加对hwb()方法的支持。

不同的方法对应的是不同的色彩空间，但色域都是同一个，即sRGB。

HEX

使用十六进制的数字来分别表示R、G、B、A的值

.valid-css-hex-colors {
  /* 一般标准 */
  --3-digits: #49b;
  --6-digits: #4499bb;

  /* 带透明度 */
  --4-digits-opaque: #f9bf; /* 不透明 */
  --8-digits-opaque: #ff99bbff; /* 不透明 */
  --4-digits-with-opacity: #49b8; /* 透明度88% */
  --8-digits-with-opacity: #4499bb88; /* 透明度88% */
}

RGB

使用0~255的十进制数字，或是0%~100%的百分比来指明R、G、B，透明度A使用百分比或0~1的数字表示

.valid-css-rgb-colors{
  --classic:rgb(64, 149, 191);
  --modern:rgb(64 149 191);
  --percents:rgb(25% 58% 75%);

  --classic-with-opacity-percent:rgba(64, 149, 191, 50%);
  --classic-with-opacity-decimal:rgba(64, 149, 191, .5);

  --modern-with-opacity-percent:rgb(64 149 191 / 50%);
  --modern-with-opacity-decimal:rgb(64 149 191 / .5);

  --percents-with-opacity-percent:rgb(25% 58% 75% / 50%);
  --percents-with-opacity-decimal:rgb(25% 58% 75% / 50%);

  --empty-channels:rgb(none none none);
}

HSL

这种色彩空间更符合人类自然理解，无需了解红绿蓝基础色是如何混合的。参数分别表示：

•H：hue，色相，取值0deg~360deg

•S：Saturation，饱和度，取值0%~100%

•L：Lightness，亮度，取值0%~100%

.valid-css-hsl-colors{
  --classic:hsl(200deg, 50%, 50%);
  --modern:hsl(200 50% 50%);

  --classic-with-opacity-percent:hsla(200deg, 50%, 50%, 50%);
  --classic-with-opacity-decimal:hsla(200deg, 50%, 50%, .5);

  --modern-with-opacity-percent:hsl(200 50% 50% / 50%);
  --modern-with-opacity-decimal:hsl(200 50% 50% / .5);

  /* 无色相和饱和度，仅用亮度可表示黑白色 */
  --empty-channels-white:hsl(none none 100%);
  --empty-channels-black:hsl(none none 0%);
}

HWB

形式上和HSL类似，但使用的3个维度为：

•H：Hue，色相，取值0deg~360deg；

•W：Whiteness，白色的浓度（0~100%）；

•B：Blackness，黑色的浓度（0~100%）；

.valid-css-hwb-colors{
  --modern:hwb(200deg 25% 25%);
  --modern2:hwb(200 25% 25%);

  --modern-with-opacity-percent:hwb(200 25% 25% / 50%);
  --modern-with-opacity-decimal:hwb(200 25% 25% / .5);

  /* 无色相和饱和度，仅用亮度可表示黑白色 */
  --empty-channels-white:hwb(none 100% none);
  --empty-channels-black:hwb(none none 100%);
}

新方法color()

新的color()方法的参数类似于rgb()方法，使用R、G、B三个直线轴上的数值来指明色彩，不同的是color()方法的第一个参数可以接收除sRGB以外的其他色域下的色彩空间标识符，且R、G、B的值仅支持0~1或0%~100%。

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

方法定义：color(colorspace c1 c2 c3[ / A])

• 参数colorspace：标识符，指明使用哪种色彩空间，可选值包括：srgb,srgb-linear,display-p3,a98-rgb,prophoto-rgb,rec2020,xyz,xyz-d50, andxyz-d65.

•参数c1、c2、c3：可以是number（0~1）、百分比或none，对应指定色彩空间下的各参数值，比如srgb,srgb-linear,display-p3对应的是R、G、B的值，具体需要看指定色彩空间描述颜色的维度。

•参数A：可选项，可以是number（0~1）、百分比或none，指明颜色的透明度

使用color()描述不同的色彩空间

sRGB

不再支持0~255取值，改为0~1范围，其实和百分比的形式是等价的。如果传了大于1的数值也默认当作1来解析。

.valid-css-srgb-colors{
  --percents:color(srgb 34% 58% 73%);
  --decimals:color(srgb .34 .58 .73);

  --percents-with-opacity:color(srgb 34% 58% 73% / 50%);
  --decimals-with-opacity:color(srgb .34 .58 .73 / .5);

  /* 色值为none或空时，表示黑色 */
  --empty-channels-black:color(srgb none none none);
  --empty-channels-black2:color(srgb);
}

Linear sRGB

Linear sRGB和sRGB是不同的色彩空间，sRGB的取值是通过一个伽马曲线函数做过校正的，并不是线性变化的，更适应人眼的感知特性，即对明暗的感知是非线性的；而Linear sRGB的颜色变化是线性的，以下是明暗从0-1渐变时，两种色彩空间实际的渐变走向。

.valid-css-srgb-linear-colors{
  --percents:color(srgb-linear 34% 58% 73%);
  --decimals:color(srgb-linear .34 .58 .73);

  --percents-with-opacity:color(srgb-linear 34% 58% 73% / 50%);
  --decimals-with-opacity:color(srgb-linear .34 .58 .73 / .5);

  /* 色值为none或空时，表示黑色 */
  --empty-channels-black:color(srgb-linear none none none);
  --empty-channels-black2:color(srgb-linear);
}

Display P3、Rec2020

display P3是最早由苹果公司推行的。如今这一标准已成为HDR显示的基础标准，能显示的颜色比sRGB多50%。而Rec2020标准比display P3的色域更广，可以用来显示4K甚至8K的影像，但目前支持这一标准的终端显示器还很少。两种色域都是使用RGB来描述的。

.valid-css-display-p3-colors{
  --percents:color(display-p3 34% 58% 73%);
  --decimals:color(display-p3 .34 .58 .73);

  --percent-opacity:color(display-p3 34% 58% 73% / 50%);
  --decimal-opacity:color(display-p3 .34 .58 .73 / .5);

  /* 无色度色相，展示为黑色 */
  --empty-channels-black:color(display-p3 none none none);
  --empty-channels-black2:color(display-p3);
}

.valid-css-rec2020-colors {
  --percents: color(rec2020 34% 58% 73%);
  --decimals: color(rec2020 .34 .58 .73);

  --percent-opacity: color(rec2020 34% 58% 73% / 50%);
  --decimal-opacity: color(rec2020 .34 .58 .73 / .5);

  /* 无色度色相，展示为黑色 */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

CIE标准

让我们先回到开头的两张色域图，会发现基于RGB描述的色域基本是一个三角形，因为都是使用3个基础色混合而成，但人眼所能感知的色域是形似马蹄的图形（具体如何绘制出的，感兴趣的可自行搜索了解）。基于RGB标准的色彩空间，都很难完全覆盖人眼能感知的所有颜色。而基于CIE标准（国际照明委员会制定的一种测定颜色的国际标准，它描述了人眼对颜色的感知和色彩的测量方法）的色彩空间，理论上是能够包括人视觉所能感知到的所有颜色。

CSS Color 4新标准也新增了对于CIE标准色域的支持。下面介绍的lab()、lch()、oklab()、oklch()都是基于CIE的取色新方法。

lab()

lab()方法描述的是基于CIE标准的色彩空间中的颜色，能够覆盖人眼所能看到的全色域。和与基于RGB来描述色彩的维度不同，lab使用的维度分别为：

•L：lightness，视觉上线性渐变的亮度，取值范围0~100或0%~100%；

•A：代表更贴合人眼视觉特性的两个色轴之其一：红-绿，取值范围均为 -125~125 或 -100%~100%。当A为正值，则为更偏红色；为负值时，更偏绿；

•B：代表更贴合人眼视觉特性的两个色轴之其二：蓝-黄，取值范围均为 -125~125 或 -100%~100%。值为正值，更偏黄；为负值，更偏蓝。

.valid-css-lab-colors{
  --percent-and-degrees:lab(58% -16 -30);
  --minimal:lab(58 -16 -30);

  --percent-opacity:lab(58% -16 -30 / 50%);
  --decimal-opacity:lab(58% -16 -30 / .5);

  /* 后两个参数为none是可表示纯灰度 */
  --empty-channels-white:lab(100 none none);
  --empty-channels-black:lab(none none none);
}

lch()

lch使用的维度分别是：

•L：lightness，视觉上线性渐变的亮度，取值范围0~100或0%~100%；

•C：chroma，颜色的纯度，类似于饱和度，取值范围0~230，但实际上，这个值是没有上限的；

•H：hue，色相，类似hsl和hwb，是个角轴，取值范围0deg~360deg；

.valid-css-lch-colors{
  --percent-and-degrees:lch(58% 32 241deg);
  --just-the-degrees:lch(58 32 241deg);
  --minimal:lch(58 32 241);

  --percent-opacity:lch(58% 32 241 / 50%);
  --decimal-opacity:lch(58% 32 241 / .5);

  /* 后两个参数为none是可表示纯灰度 */
  --empty-channels-white:lch(100 none none);
  --empty-channels-black:lch(none none none);
}

oklab()

oklab是校正版的lab，优化了图片处理质量，在CSS中意味着渐变优化和颜色处理函数优化，消除了色相偏移（hue shift，即在lab中改变颜色纯度，色相也会变化），使用的维度和lab()是一致的。

.valid-css-oklab-colors{
  --percent-and-degrees:oklab(64% -.1 -.1);
  --minimal:oklab(64 -.1 -.1);

  --percent-opacity:oklab(64% -.1 -.1 / 50%);
  --decimal-opacity:oklab(64% -.1 -.1 / .5);

  /* 后两个参数为none是可表示纯灰度 */
  --empty-channels-white:oklab(100 none none);
  --empty-channels-black:oklab(none none none);
}

oklch()

相应的，oklch是lch的校正版，取色的逻辑和hsl类似，在圆色盘中选择一个角度从而选中一个色相，再通过调节亮度和纯度，也就是hsl中的饱和度，纯度和饱和度基本可认为是等价的，区分仅在于纯度和亮度的调节通常是同步进行的，否则纯度很容易超出目标色域的范围。这里有一个oklch的拾色器，可以体验下。

.valid-css-oklch-colors{
  --percent-and-degrees:oklch(64% .1 233deg);
  --just-the-degrees:oklch(64 .1 233deg);
  --minimal:oklch(64 .1 233);

  --percent-opacity:oklch(64% .1 233 / 50%);
  --decimal-opacity:oklch(64% .1 233 / .5);

  /* 后两个参数为none是可表示纯灰度 */
  --empty-channels-white:oklch(100 none none);
  --empty-channels-black:oklch(none none none);
}

color-mix()

除了新增的一些取色方法外，新标准还有一个混色函数，可以将上边提到的各种不同色彩空间的中颜色进行混合计算出新颜色。

color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue,hsl(120 100% 50%) 20%, white);

方法定义：color-mix(method, color1[ p1], color2[ p2])

•参数method：指定混色的色彩空间，以 in <color space> 的形式，<color space>包含：srgb,srgb-linear,lab,oklab,xyz,xyz-d50, xyz-d65,hsl,hwb,lch, oroklch

•参数color1、color2：为对应method中指定色彩空间中的任一颜色；

•参数p1、p2：为可选参数，取值范围为0%~100%，可以指明混色的比例，如果为空，默认color1和color2各为50%；

项目中如何使用高清色彩

在我们应用一项新语法时，我们通常会有两种策略：优雅降级和渐进增强，具体实施方案：

优雅降级

这种实施起来比较简单，即同时使用新旧取色方法，让浏览器自动判断展示哪种

/* 原代码 */
color: red;
color:color(display-p3 1 0 0);

/* 如果浏览器不支持display-p3，则会只解析第一行 */
color: red;

/* 如果浏览器支持，则会最终使用第二行 */
color:color(display-p3 1 0 0);

渐进增强

使用@supports和@media先判断当前浏览器是否支持新的色域标准，并在条件的情况下提供新的色值。

色域媒体查询

•dynamic-range：取值standard或high，用于判断当前硬件设备是否支持高清、高对比度、高色彩精度，不过这一属性判断的比较笼统，并不能准确判断浏览器是否支持新色域和色彩空间。

@media(dynamic-range: high){
  /* safe to use HD colors */
  color: color(display-p3 34% 58% 73%);
}

•color-gamut：取值 srgb、p3 或 rec2020，对应可判断用户设备是否支持sRGB、Display P3 或 REC2020色域。

@media(color-gamut: srgb){
  /* safe to use srgb colors */
  color: #4499bb;
}

@media(color-gamut: p3){
  /* safe to use p3 colors */
  color: color(display-p3 34% 58% 73%);
}

@media(color-gamut: rec2020){
  /* safe to use rec2020 colors */
  color: color(rec2020 34% 58% 73%);
}

除了可以直接使用css媒体查询，还可用途JavaScript中的window.matchMedia()方法来进行媒体查询。

const hasHighDynamicRange = window.matchMedia('(dynamic-range: high)').matches;

console.log(hasHighDynamicRange);// true || false

const hasP3Color = window.matchMedia('(color-gamut: p3)').matches;

console.log(hasP3Color);// true || false

色彩空间查询

•使用@supports判断某个css方法或属性是否支持

@supports(background:rgb(0 0 0)){
  /* rgb color space supported */
  background:rgb(0 0 0);
}


@supports(background:color(display-p3 0 0 0)){
  /* display-p3 color space supported */
  background:color(display-p3 0 0 0);
}


@supports(background:oklch(0 0 0)){
  /* oklch color space supported */
  background:oklch(0 0 0);
}

应用实例

在实际应用中，在新旧标准过渡期间，可以综合使用上边的查询方法，下面是一个兼容新旧标准的实例：

:root{
  --neon-red:rgb(100% 0 0);
  --neon-blue:rgb(0 0 100%);
}

/* 设备是否支持展示高清 */
@media(dynamic-range: high){

  /* 浏览器是否能解析display-p3 */
  @supports(color:color(display-p3 0 0 0)){

    /* 安全使用display-p3 */
    --neon-red:color(display-p3 1 0 0);
    --neon-blue:color(display-p3 0 0 1);
  }
}

开发调试

如果更新了最新版本的chrome浏览器的话，就能发现DevTools里的拾色器已经支持了CSS Color 4中的新语法，点击页面元素中的颜色属性，在弹出的拾色器中，中间色值右侧的箭头，之前的版本中，点击箭头是在hex、rgb、hsl和hwb之间切换，但新版本中，点击箭头会出现下拉框，可以看到所有新增的色彩空间和方法，以及当前色值所对应的可替换色值。

同时在选择了不同的色彩空间后，色彩的可调节参数也会相应改变。

当我们选择了一个非sRGB色域的色值后，会发现拾色器的上方区域里会展示一条sRGB的分界线，可以清晰地看出当前选择的颜色所在的色域。这能帮助开发者分辨高清色与非高清色。

而当我们选择一个超出sRGB范围的颜色后，再来点击色值右侧的箭头弹出选项列表时，会发现sRGB色域下的色值后边会带上一个三角叹号。这说明当前色值已超出了sRGB所能描述的范围，只能使用相近的颜色作为替代。

关于chrome DevTools更多关于高清颜色的更新，可参阅官方文档。

总结

sRGB之外的色域和色彩空间目前虽然还刚刚在web端起步，但未来的设计和开发要求可能会慢慢出现，尤其是H5动画、游戏、3D图像等等，对于色彩显示的要求不会永远停留在sRGB阶段，希望本文简陋的介绍能让大家多少开始了解一些关于色彩的东西。如有错误或疏漏，欢迎指正讨论。

参考文章：

1. https://web.dev/articles/color-spaces-and-functions?hl=en

2. https://developer.chrome.com/articles/high-definition-css-color-guide/

3. https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color

作者：京东科技 郑莉

来源：京东云开发者社区 转载请注明来源

言

在学习和工作中，我们经常需要使用日志来记录程序的运行状态和调试信息。而为了更好地区分不同的日志等级，我们可以使用不同的颜色来呈现，使其更加醒目和易于阅读。

在下图运行结果中，我们使用了 colorlog 库来实现彩色日志输出。通过定义不同日志等级对应的颜色，我们可以在控制台中以彩色的方式显示日志信息。例如，DEBUG 级别的日志使用白色，INFO 级别的日志使用绿色，WARNING 级别的日志使用黄色，ERROR 级别的日志使用红色，CRITICAL 级别的日志使用蓝色。

但是在查看日志文件时，我们会发现日志信息是系统默认的字体颜色，并且前后多了一些特殊符号，例如 [32m 等。这是因为在控制台中使用的是 ANSI 转义序列来实现彩色文本效果，而这些特殊符号是 ANSI 转义序列的一部分。如下图所示：

现在有一个需求，在前端页面直接查看日志内容并还原彩色文本效果，因此，我们将进行以下内容讲解：

1. 什么是 ANSI 转义序列？
2. 如何在前端页面直接查看日志内容？
3. 如何在前端页面还原彩色文本效果？

本文代码点击此处跳转，往期系列文章请访问博主的 项目实战专栏，博文中的所有代码全部收集在博主的 GitHub 仓库中；

ANSI 转义序列

ANSI 转义序列是美国国家标准化组织（American National Standards Institute，ANSI）制定的标准，是一种用于控制文本终端显示的特殊字符序列。它们以 3[ 开头，以字母和数字组合的形式表示不同的控制功能。

ANSI 转义序列可以用于控制文本的颜色、背景色、文本样式（如粗体、斜体等）、光标位置、清屏等操作。通过在输出文本中插入适当的 ANSI 转义序列，可以实现丰富的终端显示效果。

以下是一些常用的 ANSI 转义序列示例：

• 3[0m：重置所有属性，恢复默认设置；
• 3[31m：设置文本颜色为红色；
• 3[42m：设置背景颜色为绿色；
• 3[1m：设置文本为粗体；
• 3[4m：设置文本为下划线；
• 3[2J：清屏；

需要注意的是，ANSI 转义序列在不同的终端和操作系统上的支持程度可能会有所不同。在某些终端中，可能无法正确解释和显示 ANSI 转义序列。

我们以 3[31m 和 3[42m 为例，输出一个绿底红字的句子 Hello World! --sidiot.，代码如下所示：

log.debug("3[42m3[31mHello World! --sidiot.3[0m3[0m")

运行结果：

前端页面直接查看日志内容

这里的话，我们使用 Python 的 http.server 模块来启动一个简单的 HTTP 服务器。

比较快捷的方式就是在日志文件夹中打开终端，输入 python -m http.server 8888 即可，运行结果如下所示：

不过这种方式相对来说还是不太安全的，因此我们可以通过设置白名单的方式，来规避一些潜在的安全隐患，代码如下所示：

import http.server
import socketserver

class HTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
    def check_client_address(self):
        # 设置白名单，只允许特定的IP地址或主机访问
        whitelist = ['127.0.0.1', 'localhost']

        client_address = self.client_address[0]
        if client_address not in whitelist:
            self.send_response(403)
            self.end_headers()
            self.wfile.write(b'Forbidden. Please contact sidiot.')
            return False

        return True

    def do_GET(self):
        if not self.check_client_address():
            return
        
        super().do_GET()

with socketserver.TCPServer(('0.0.0.0', 8888), HTTPRequestHandler) as httpd:
    httpd.serve_forever()

目前本机的 IP 为 192.168.124.23，当我们以 127.0.0.1 来访问 8888 服务端口时，访问是成功的，但是当我们用 192.168.124.23 来访问服务端口时，访问是失败的。

运行结果：

现在我们点击文件，它会直接通过浏览器直接下载，但是我们需要的是在网页上能够直接阅览文件中的内容，因此我们可以从 do_GET() 下手。

我们可以设计一个根据传入的文件名参数，读取本地文件并作为响应结果进行返回的方法，然后根据一定的规则进行触发，代码如下所示：

def read_file(self):
    try:
        self.send_response(200)
        self.send_header("Content-Type", "text/plain; charset=utf-8")
        self.end_headers()
        self.wfile.write(open(self.path[6:], 'rb').read())

    except FileNotFoundError:
        self.send_response(404)
        self.end_headers()
        self.wfile.write(b'File not found!')

def do_GET(self):
    if self.check_client_address():
        if self.path.startswith("/?log="):
            self.read_file()
        else:
            super().do_GET()

上述代码通过检查请求的资源路径来处理 GET 请求。如果请求的资源路径前缀是 /?log=，且是当前目录下存在的日志文件，它会读取文件并将其内容作为响应发送。否则，它会使用基类的默认行为处理普通的 GET 请求。

运行结果：

至此，我们已经实现了前端页面直接查看日志内容的功能。

前端页面还原彩色文本效果

原理分析

当我们想要在前端页面展示 ANSI 字体的彩色效果时，我们只需要简单地将 ANSI 转义序列转换成相应的 HTML 代码就可以实现了。这个转换过程实际上可以通过编写一个 Python 函数来实现，该函数可以接受包含 ANSI 控制码的字符串作为输入，并将其转换为带有相应样式的 HTML 代码输出，代码如下所示：

def convert_ansi_to_html(ansi_text):
    ansi_to_html = {
        '\x1b[31m': '<span style="color: red;">',
        '\x1b[42m': '<span style="background-color: green;">',
        ...,
    }
    html_text = re.sub(r'\x1b[[0-9;]*m', lambda match: ansi_to_html.get(match.group(0), ''), ansi_text)

    return html_text


if __name__ == '__main__':
    ansi = "\033[42m\033[31mHello World! --sidiot.\033[0m\033[0m"
    print(ansi)
    html = convert_ansi_to_html(ansi)
    print(f"convert content: {html}")

需要注意的是，在 ANSI 转义序列中，\x1b 和 3 都代 表ASCII 码中的 Escape 字符，用于开始一个转义序列。

运行结果：

使用 ansiconv 转换

接下来，我们借助已有的库函数 ansiconv 进行 ANSI 的转换。

通过 pip 进行安装：

pip install ansiconv

根据 ansiconv 的官方文档使用其中的三个方法 to_plain()，to_html() 和 base_css() 来实现在前端页面展示 ANSI 字体的彩色效果，代码如下所示：

import ansiconv

ansi = "\033[42m\033[31mHello World! --sidiot.\033[0m\033[0m"
print(f"Ansi: {ansi}")
plain = ansiconv.to_plain(ansi)
html = ansiconv.to_html(ansi)
print(f"Convert Plain: {plain}")
print(f"Convert HTML: {html}")

在 base_css() 中会有相关的 CSS 映射表，如下所示：

css_rule('.ansi31', color="#FF0000"),
css_rule('.ansi42', background_color="#00FF00"),

运行结果：

研究 ansiconv 源码

我们将通过研究 ansiconv 的源码，以便深入了解它是如何将 ANSI 转换成纯文本或 HTML 代码的工作原理。

to_plain() 的源码如下所示：

上述代码使用正则表达式匹配字符串中的 ANSI 转义序列，并将其替换为空字符串，从而得到不包含转义序列的纯文本。

正则表达式的含义如下：

• \x1B：匹配 ESCAPE 字符；
• \[：匹配左方括号；
• [0-9;]*：匹配零个或多个数字或分号；
• [ABCDEFGHJKSTfmnsulh]：匹配 ANSI 转义序列中的控制字符；

我们通过 re.findall() 方法来获取所有匹配的结果，这样够清晰地捕获所有符合条件的匹配项，从而更好地理解 ansiconv 是如何进行 ANSI 到纯文本的转换，代码如下所示：

ansi = "\033[42m\033[31mHello World! --sidiot.\033[0m\033[0m"
print(re.findall(r'\x1B[[0-9;]*[ABCDEFGHJKSTfmnsulh]', ansi))

运行结果：

to_html() 的源码如下所示：

上述代码将 ANSI 字符串分割成块，并对每个块调用 _block_to_html() 函数进行解析和转换，同时还处理了 ANSI 命令 "A"，模拟向上移动光标的行为。如果 replace_newline 为 True，则 HTML 字符串中的换行符 \n 将替换为 <br />\n 以保留 HTML 输出中的换行符。

其中 _block_to_html() 的源码如下所示：

上述代码使用正则表达式匹配 ANSI 代码，并根据匹配结果生成对应的 HTML 代码。

正则表达式的含义：

• ^：表示匹配字符串的开头。
• \[：匹配左方括号 [。
• (?P<code>\d+(?:;\d+)*)?：这是一个命名捕获组，用于匹配 ANSI 代码中的数字部分。它由以下组成： \d+：匹配一个或多个数字。 (?:;\d+)*：这是一个非捕获组，用于匹配分号 ; 和一个或多个数字的重复出现。(?: ... ) 表示非捕获组，* 表示重复零次或多次。
• (?P<command>[Am])：这是另一个命名捕获组，用于匹配 ANSI 代码中的命令部分。它由以下组成： [Am]：匹配字符 A 或 m。

我们可以通过运行源码里的部分代码来帮助理解，代码如下所示：

text = ("\x1B[0;32;45msidiot\n"
        "\033[42m\033[31mHello World! --sidiot.\033[0m\033[0m")
print(text)
blocks = text.split('\x1B')
print(blocks)
for block in blocks:
    match = re.match(r'^[(?P<code>\d+(?:;\d+)*)?(?P<command>[Am])', block)
    if match is not None:
        print("\nmatch:", match, ", code:", match.group('code'), ", command:", match.group('command'))

运行结果：

实际应用

通过深入理解 ANSI 转换思路和 ansiconv 源码，我们可以为之前的 http.server 服务带来全新的优化。

首先，将原先的 read_file() 方法进行优化，代码如下所示：

def read_file(self, content_type, file_io):
    try:
        self.send_response(200)
        self.send_header("Content-Type", f"{content_type}; charset=utf-8")
        self.end_headers()
        self.wfile.write(file_io)

    except FileNotFoundError:
        self.send_response(404)
        self.send_header("Content-Type", "text/plain; charset=utf-8")
        self.end_headers()
        self.wfile.write(b'File not found!')

上述代码通过接收 content_type 和 file_io 两个参数，实现将自定义内容作为响应返回给客户端。

然后修改请求路径，使其能够返回纯文本和 HTML 两种不同类型的内容，代码如下所示：

def do_GET(self):
    if self.check_client_address():
        if self.path.startswith("/?plain="):
            file = open(self.path[8:], 'rb').read()
            plain = ansiconv.to_plain(file.decode('UTF-8'))
            self.read_file("text/plain", plain.encode())
        elif self.path.startswith("/?html="):
            file = open(self.path[7:], 'rb').read()
            conv = ansiconv.to_html(file.decode('UTF-8'))
            css = ansiconv.base_css()
            html = """
            <html>
              <head><style>{0}</style></head>
              <body>
                <pre class="ansi_fore ansi_back">{1}</pre>
              </body>
            </html>
            """.format(css, conv)
            print(html)
            self.read_file("text/html", html.encode())
        else:
            super().do_GET()

这里要注意的是，需要设置 CSS 样式，不然 class 类是无法进行渲染的。

纯文本运行结果：

HTML 运行结果：

后记

在本文中，我们探讨了如何实现将 ANSI 字体在前端页面进行彩色展示的方法。在前端页面中直接显示 ANSI 转义序列是不起作用的，因为浏览器不会解析和处理这些转义序列。

为了在前端页面实现彩色展示，我们介绍了一种方法，即将 ANSI 转义序列转换为对应的 HTML 代码。通过解析 ANSI 转义序列并将其转换为适当的 HTML 标签和样式，我们可以在前端页面上还原彩色文本的效果。

在本文中，我们使用了 Python 中的 ansiconv 库来实现 ANSI 转换。该库提供了 to_plain 和 to_html 两个方法，分别用于将 ANSI 转义序列转换为纯文本和 HTML 代码。我们还展示了如何使用这些方法来转换 ANSI 字符串，并在前端页面上显示转换后的结果。

通过本文的介绍，读者可以了解到如何在前端页面实现彩色文本的展示，从而提升用户体验和可读性。无论是在日志查看器、终端模拟器还是其他需要展示彩色文本的应用中，这种技术都能发挥重要作用。

以上就是 从终端到浏览器：实现 ANSI 字体在前端页面的彩色展示 的所有内容了，希望本篇博文对大家有所帮助！欢迎大家持续关注我的博客，一起分享学习和成长的乐趣！✨

作者：sidiot
链接：https://juejin.cn/post/7381820436274184202

reamweaver的CSS面板分类

type(类型)

background(背景)

block(区块)

box(方框) 或盒子意思

border(边框)

list(列表)

positioning(定位)

extensions(扩展)

共八个部分

1. type(类型)

type面板主要是对文字的字体，大小，颜色，效果等基本样式进行设置。

注意：属性名带*号的是指样式效果不能在编辑文档时显示，要用浏览器打开才能看到效果。

(1)font-family：设置字体系列。什么叫字体系列呢?是指对文字设定几个字体，当遇到第一个字体不能显示的文字时会自动用系列中的第二个

字体或后面的字体显示。

注意:一般英文字体我们用"Verdana, Arial, Helvetica, sans-serif"这个系列比较好看。如果不用这些字体系列，你就需要自己编辑字体系列，

也可以直接手动在下拉框里写字体名，字体之间用逗号隔开。中文网页默认字体是宋体, 一般就空着不要选取任何字体。

默认值： not specified(取决于浏览器,系统默认的字体, 如: 微软雅黑)

注意：

1.如果有汉字, 那么我们要加引号

2.如果有多个英文字母组成的单词, 我们也要加引号; "microsoft yahei" 中间用空格隔开

3.font-family:"黑体","宋体","华文隶书"; 首先找黑体, 没有黑体找宋体...

为了避免在CSS中使用 font 或 font-family 设置中文字体时乱码, 可以使用 Unicode 编码来表示字体。

/* 示例:使用Unicode字体编码设置字体为"微软雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";

(2)font-size：定义文字的大小。你可以通过选取数字和度量单位来选择具体的字体大小，或者你也可以选择一个相对的字体大小。

最好使用pixels作为单位，这样不会在浏览器中文本变形。一般字体用比较标准的12px或14px, 默认值为16px。

注意：CSS中长度的单位分绝对长度单位和相对长度单位:

绝对长度单位有：

pt：磅(point)

mm、cn、in、pc：(毫米、厘米、英寸、活字)根据显示的实际尺寸来确定长度。

此类单位不随显示器的分辨率改变而改变。

相对长度单位有：

px：(像素)根据显示器的分辨率来确定长度。

em：当前文本的尺寸。例如：{font-size:2em}是指文字大小为原来的2倍。

比如自身font-size: 30px; 那么此时1em=30px;

ex：当前字母"x"的高度，一般为字体尺寸的一半。

%：是以当前文本的百分比定义尺寸。例如：{ font-size:300%}是指文字大小为原来的3倍。

small、large：表示比当前小一个级别或大一个级别的尺寸。

默认值：medium(标准大小)

(3)font-style：定义字体样式为normal、italic、oblique。默认设置为normal。

注意： italic 斜体 oblique 歪斜体 italic和oblique实际效果是一样的。

默认值:normal

(4)line-height：设置文本所在行的行高。默认为normal。可以是行内元素、行内块元素, 通常与height设置的高度值相同, 可以做到垂直居中的作用。

你也可以自己键入一个精确的数值并选取一个计量单位。

比较直观的写法用百分比, 例如140%是指行高等于文字大小的1.4倍。

最常用的方法: line-height:1.5em; /*行间距,相对数值,1.5倍行距,*/ 可有效的避免文字发生重叠

默认值： normal

(5)text-decoration：在文本中添加underline(下划线)、overline(上划线)、line-through(中划线)、blink(闪烁效果)。

这些效果可以同时存在，将效果前的复选框选定即可。

注意：链接的默认设置是underline，我们可以通过选none去除下划线。blink(闪烁效果)只在mozilla浏览器里可以看到, IE、opera不支持

默认值： none

(6)font-weight：给字体指定粗体字的磅值。

normal 默认值。定义标准的字符。

bold 定义粗体字符。

bolder 定义更粗的字符。

lighter 定义更细的字符。

100

200

300

400

500

600

700

800

900

inherit 规定应该从父元素继承字体的粗细。

定义由粗到细的字符。400 等同于 normal, 而 700 等同于 bold。

默认值: normal

(7)font-variant：允许你选取字体的变种, 选small-caps(小型大写字母)时, 此样式区域内所有字母大写。

normal表示正常的字体, 为默认值；

默认值: normal

(8)text-transform：将选区中每个单词的第一个字母转为大写, 或者令单词全部大写或全部小写。

参数：capitalize(单词首字母大写)、uppercase(转换成大写)、lowercase(转换成小写)、none(不转换)。

默认值：none

(9)color：定义文字颜色。包括对表单输入的文字颜色。

CSS中颜色的值有三种表示方法：

#RRGGBB格式，是由红绿蓝三种颜色的值组合，每种颜色的值为"00 – FF"的两位十六进制正整数。

例如：#FF0000表示红色，#FFFF00表示黄色。

rgb(R,G,B)格式, RGB为三色的值, 取0~255, 例如：rgb(255,0,0)表示红色, rgb(255,255,0)表示黄色。

用颜色名称。CSS可以使用已经定义好的颜色名称。例如：red表示红色, yellow表示黄色。

颜色值的缩写:

p{color:#000000} 可以缩写为：p{color:#000}

p{color:#336699} 可以缩写为：p{color:#369}

默认值： not specified

color: transparent; 透明色

rgba() 解释: rgba(红0-255, 绿0-255, 蓝0-255, 透明度0-1)

注意: 如果文字的颜色通过单独的类选择去设置没有改变颜色, 则应该通过组合选择器(.header .top .topR .blue)去设置, 改变它的优先级。

2. background(背景)

background面板主要是对元素的背景进行设置，包括背景颜色、背景图象、背景图象的控制。

一般是对body(页面)、table(表格)、div(区域)的设置。

(1)background-color：设置元素的背景色。包括对input表单输入框的背景颜色;

默认值: transparent(背景颜色为透明)

rgba() 解释: rgba(红0-255, 绿0-255, 蓝0-255, 透明度0-1) 一般用于背景色

(2)background-image：设置元素的背景图像。

默认值:none

CSS3支持多重背景图,只要加上一个url指定图片路径,并用逗号(,)将两组url分隔就可以了

background-image:url(a.jpg),url(b.jpg);

base64使用

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

(3)background-repeat：确定背景图像是否以及如何重复。

repeat 默认值。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat 背景图像将仅显示一次。

inherit 规定应该从父元素继承background-repeat属性的设置。

注意：如果定义的元素的body，可以控制页面背景是否重复。

默认值: repeat

(4)background-attachment：固定背景图像或者跟随内容滚动。

参数fixed表示固定背景(不随屏幕滚动而滚动，决定背景图像是否要固定在原来的位置), scroll表示跟随内容滚动的背景。

注意：如果定义的元素的body, 可以使页面背景固定。

默认值: scroll

(5)background-position(X)：指定背景图像的水平位置。

可以指定为left(左边), center(居中)，right(右边)；

也可以指定数值，如20px是指背景距离左边20象素。

background-position(Y)：指定背景图像的垂直位置。

可以指定为top(顶部), center(居中), bottom(底部)；也可以指定数值。

background-position属性值:

left top

center top

right top

left center

center center

right center

left bottom

center bottom

right bottom

如果您仅规定了一个关键词，那么第二个值将是"center"。

注意:采用英文单词的水平位置和垂直位置的属性值可以调换

x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。

xpos ypos 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。

如果您仅规定了一个值，另一个值将是50%。

您可以混合使用 % 和 position 值。

默认值：0% 0%