整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
background-color 属性为元素定义了背景颜色：
<html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html>
HTML样式：好看的颜色字体是有方法的
23 年的 CSS 新特性中，有一个非常重要的功能更新 -- 相对颜色。
简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。
其核心功能就是，让我们能够基于一个现有颜色 A，通过一定的转换规则，快速生成我们想要的颜色 B。
其功能能够涵盖：
当然，今天我们不会一个一个去过这些功能，更多的时候，我们只需要知道我们能够实现这些功能。
本文，我们将从实际实用角度出发，基于实际的案例，看看 CSS 相对颜色，能够如何解决我们的一些实际问题。
首先，我们通过一张图，一个案例，快速入门 CSS 相对颜色语法：
相对颜色语法的目标是允许从另一种颜色派生颜色。
上图显示了将原始颜色 green 转换为新颜色的颜色空间后，该颜色会转换为以 r、g、b 和 alpha 变量表示的各个数字，这些数字随后会直接用作新的 rgb() 颜色的值。
举个例子：
<p> CSS Relative Color </p>
p {
color: rgb(255, 0, 0);
}实现一个 color 为红色（rgb 值为 rgb(255, 0, 0)）的字体：
基于上面的相对颜色语法，我如何通过一个红色生成绿色文字呢？示意如下：
p {
--color: rgb(255, 0, 0);
color: rgb(from var(--color) calc(r - 255) calc(g + 255) b); /* result = rgb(0, 255, 0) */
}
效果如下，我们就得到绿色字体：
解释一下：
通过这个 DEMO，我们把几个核心基础语法点学习一下：
from 关键字，它是相对颜色的核心。它表示会将 from 关键字后的颜色定义转换为相对颜色！在 from 关键字后面，CSS 会期待一种颜色，即能够启发生成另一种颜色。
第二个关键点，from 后面通常会接一个颜色值，这个颜色值可以是任意颜色表示法，或者是一个 CSS 变量，下面的写法都是合法的：
p {
color: rgba(from #ff0000) r g b);
color: rgb(from rgb(255, 0, 0) r g b);
color: rgb(from hsl(0deg, 100%, 50%) r g b);
color: rgb(from var(--hotpink) r g b);
}
另外一个非常重要的基础概念就是，我们可以对 (from color r g b) 后的转换变量 r g b 使用 calc() 或其他 CSS 函数。
就是我们上面的例子：
p {
--color: rgb(255, 0, 0);
color: rgb(from var(--color) calc(r - 255) calc(g + 255) b); /* result = rgb(0, 255, 0) */
}
相对颜色的基础的使用规则就是这样，它不仅支持 rgb 颜色表示法，它支持所有的颜色表示法：
通常页面上的按钮，都会有 hover/active 的颜色变化，以增强与用户的交互。
像是这样：
最常见的写法，就是我们需要在 Normal 状态、Hover 状态、Active 状态下写 3 种颜色：
p {
color: #ffcc00;
transition: .3s all;
}
/* Hover 伪类下为 B 颜色 */
p:hover {
color: #ffd21f;
}
/** Active 伪类下为 C 颜色 **/
p:active {
color: #ab8a05;
}
在之前，我们介绍过一种利用滤镜 filter: contrast() 或者 filter: brightness() 的统一解决方案，无需写多个颜色值，可以根据 Normal 状态下的色值，通过滤镜统一实现更亮、或者更暗的伪类颜色。
在今天，我们也可以利用 CSS 相对颜色来做这个事情：
div {
--bg: #fc0;
background: var(--bg);
transition: .3s all;
}
div:hover {
background: hsl(from var(--bg) h s calc(l * 1.2));
}
div:active {
background: hsl(from var(--bg) h s calc(l * 0.8));
}
我们通过 hsl 色相、饱和度、亮度颜色表示法表示颜色。实现：
在实际业务中，这是一个非常有用的用法。
相对颜色，还有一个非常有意思的场景 -- 让文字颜色能够自适应背景颜色进行展示。
有这么一种场景，有的时候，无法确定文案的背景颜色的最终表现值（因为背景颜色的值可能是后台配置，通过接口传给前端），但是，我们又需要能够让文字在任何背景颜色下都正常展现（譬如当底色为黑色时文字应该是白色，当背景为白色时，文字应该为黑色）。
像是这样：
在不确定背景颜色的情况下，无论什么情况，文字颜色都能够适配背景的颜色。
在之前，纯 CSS 没有特别好的方案，可以利用 mix-blend-mode: difference 进行一定程度的适配：
div {
// 不确定的背景色
}
p {
color: #fff;
mix-blend-mode: difference;
}
实操过这个方案的同学都会知道，在一定情况下，前景文字颜色还是会有一点瑕疵。并且，混合模式这个方案最大的问题是会影响清晰度。
有了 CSS 相对颜色后，我们有了更多的纯 CSS 方案。
我们可以利用相对颜色的能力，基于背景色颜色进行反转，赋值给 color。
一种方法是将颜色转换为 RGB，然后从 1 中减去每个通道的值。
代码非常简单：
p {
/** 任意背景色 **/
--bg: #ffcc00;
background: var(--bg);
color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b)); /** 基于背景反转颜色 **/
}
用 1 去减，而不是用 255 去，是因为此刻，会将 rgb() 表示法中的 0~255 映射到 0~1。
效果如下：
配个动图，我们利用背景色的反色当 Color 颜色，适配所有背景情况：
完整的 DEMO 和代码，你可以戳这里：CodePen Demo -- CSS Relatvie Color Adapt BG
当然，这个方案还有两个问题：
为了解决这两个问题，CSS 颜色规范在 CSS Color Module Level 6 又推出了一个新的规范 -- color-contrast()。
color-contrast() 函数标记接收一个 color 值，并将其与其他的 color 值比较，从列表中选择最高对比度的颜色。
利用这个 CSS 颜色函数，可以完美的解决上述的问题。
我们只需要提供 #fff 白色和 #000 黑色两种可选颜色，将这两种颜色和提供的背景色进行比较，系统会自动选取对比度更高的颜色。
改造一下，上面的代码，它就变成了：
p {
/** 任意背景色 **/
--bg: #ffcc00;
background: var(--bg);
color: color-contrast(var(--bg) vs #fff, #000); /** 基于背景色，自动选择对比度更高的颜色 **/
}
这样，上面的 DEMO 最终效果就变成了：
此方案的优势在于：
当然，唯一限制这个方案的最大问题在于，当前，color-contrast 还只是一个实验室功能，未大规模被兼容。
到今天，我们可以利用 CSS 提供的各类颜色函数，对颜色有了更为强大的掌控力。
很多交互效果，不借助 JavaScript 的运算，也能计算出我们想要的最终颜色值。本文简单的借助：
两个案例，介绍了 CSS 相对颜色的功能。
原文链接：https://juejin.cn/post/7321410822789742618
在学习和工作中，我们经常需要使用日志来记录程序的运行状态和调试信息。而为了更好地区分不同的日志等级，我们可以使用不同的颜色来呈现，使其更加醒目和易于阅读。
在下图运行结果中，我们使用了 colorlog 库来实现彩色日志输出。通过定义不同日志等级对应的颜色，我们可以在控制台中以彩色的方式显示日志信息。例如，DEBUG 级别的日志使用白色，INFO 级别的日志使用绿色，WARNING 级别的日志使用黄色，ERROR 级别的日志使用红色，CRITICAL 级别的日志使用蓝色。
但是在查看日志文件时，我们会发现日志信息是系统默认的字体颜色，并且前后多了一些特殊符号，例如 [32m 等。这是因为在控制台中使用的是 ANSI 转义序列来实现彩色文本效果，而这些特殊符号是 ANSI 转义序列的一部分。如下图所示：
现在有一个需求，在前端页面直接查看日志内容并还原彩色文本效果，因此，我们将进行以下内容讲解：
本文代码点击此处跳转，往期系列文章请访问博主的 项目实战专栏，博文中的所有代码全部收集在博主的 GitHub 仓库中；
ANSI 转义序列是美国国家标准化组织（American National Standards Institute，ANSI）制定的标准，是一种用于控制文本终端显示的特殊字符序列。它们以 3[ 开头，以字母和数字组合的形式表示不同的控制功能。
ANSI 转义序列可以用于控制文本的颜色、背景色、文本样式（如粗体、斜体等）、光标位置、清屏等操作。通过在输出文本中插入适当的 ANSI 转义序列，可以实现丰富的终端显示效果。
以下是一些常用的 ANSI 转义序列示例：
需要注意的是，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 转义序列，并将其替换为空字符串，从而得到不包含转义序列的纯文本。
正则表达式的含义如下：
我们通过 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 代码。
正则表达式的含义：
我们可以通过运行源码里的部分代码来帮助理解，代码如下所示：
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
*请认真填写需求信息，我们会在24小时内与您取得联系。
