多语言字体回退（Fallback）：unicode-range 优化中日韩（CJK）字体的下载策略 大家好，今天我们来深入探讨一个Web开发中常见但又容易被忽视的问题：多语言字体回退，特别是针对中日韩（CJK）字体的优化下载策略。在多语言网站和应用中，确保用户看到正确的字符至关重要。如果缺少合适的字体，用户可能会看到乱码或错误的字符，严重影响用户体验。而对于CJK字体，由于其字符集庞大，动辄几兆甚至十几兆的字体文件会严重拖慢网页加载速度。 我们的目标是：在保证正确显示CJK字符的前提下，尽可能减少字体文件的下载量，提升页面加载速度。 1. 字体回退机制与问题 浏览器默认的字体回退机制是：当遇到当前字体无法显示的字符时，会自动尝试使用系统或其他已加载的字体来显示。这个过程被称为字体回退（Fallback）。然而，这种机制存在以下问题： 不确定性： 字体回退的结果依赖于用户的操作系统和已安装的字体，无法保证所有用户都能看到一致的显示效果。 性能问题： 如果字体回退链很长，浏览器需要尝试多个字体才能找到合适的字形，这会增加渲染时间。 盲目下载： 为了覆盖所有可能的字符，开发者可能会选择加载包 …
CSS 逻辑视口单位：`vi` (inline) 与 `vb` (block) 在不同书写模式下的动态变化
CSS 逻辑视口单位：vi (inline) 与 vb (block) 在不同书写模式下的动态变化 大家好，今天我们来深入探讨 CSS 逻辑视口单位 vi 和 vb，以及它们在不同书写模式 (writing modes) 下的动态变化。理解这两个单位对于创建响应式且能适应各种国际化布局的网页至关重要。 1. 视口单位的引入与传统视口单位的局限性 在响应式 Web 设计中，视口单位 (Viewport Units) 扮演着关键角色。vw (viewport width) 和 vh (viewport height) 允许我们根据视口的宽度和高度来定义元素的大小，从而实现相对视口大小的布局。例如，width: 50vw 会使元素的宽度占据视口宽度的 50%。 然而，vw 和 vh 存在一个局限性：它们始终与视口的物理宽度和高度相关，而忽略了文本的书写方向和布局方向。在传统的水平书写模式（例如，从左到右）下，这通常不是问题。但是，当涉及到垂直书写模式（例如，日语的某些形式、蒙古语）或从右到左的书写模式（例如，阿拉伯语、希伯来语）时，vw 和 vh 的行为可能不符合预期。 2. 逻辑视口单位： …
文本强调标记：`text-emphasis` 在 CJK 排版中的点号位置与行高影响
CJK 排版中的 text-emphasis: 点号位置与行高影响 大家好，今天我们来深入探讨一下 CSS 中的 text-emphasis 属性，特别是它在 CJK (Chinese, Japanese, Korean) 排版中的表现，以及它对行高的影响。text-emphasis 用于在文本旁边添加强调标记，通常是点、圈、或其他符号。虽然这个属性看似简单，但在 CJK 环境下，它的行为却受到多种因素的影响，需要我们深入理解才能正确使用。 text-emphasis 属性概览 首先，我们回顾一下 text-emphasis 相关的 CSS 属性： text-emphasis (shorthand): 用于同时设置 text-emphasis-style 和 text-emphasis-color。 text-emphasis-style: 定义强调标记的样式，例如 dot, circle, double-circle, triangle, sesame 等。还可以使用字符串作为强调标记。 text-emphasis-color: 定义强调标记的颜色。 text-emphasis-po …
注音符号排版：HTML Ruby 标签与 CSS `ruby-position` 的对齐渲染
注音符号排版：HTML Ruby 标签与 CSS ruby-position 的对齐渲染 大家好，今天我们来深入探讨一个在中文网页排版中经常遇到，但又容易被忽视的问题：注音符号的正确渲染，特别是 HTML ruby 标签配合 CSS ruby-position 属性的对齐问题。 注音符号（Bopomofo）是标注汉字发音的一种音标系统，在台湾地区以及部分海外华人社区被广泛使用。在网页中，我们通常使用 HTML ruby 标签来将注音符号添加到汉字上方，以便读者更准确地理解和发音。然而，仅仅使用 ruby 标签是不够的，还需要配合 CSS ruby-position 属性来控制注音符号的位置，实现最佳的视觉效果。 HTML ruby 标签的基础用法 ruby 标签的基本结构如下： <ruby> 漢 <rt>ㄏㄢˋ</rt> </ruby> ruby：定义 ruby 注释。 rt：定义 ruby 注释的文本。 rp：定义不支持 ruby 元素的浏览器所显示的文本。 （这个我们之后会涉及） 这个简单的例子会在“漢”字上方显示“ㄏㄢˋ”这个注音。 …
正交流（Orthogonal Flows）：水平父容器中垂直子元素的尺寸计算与基线对齐
好的，没问题。 正交流（Orthogonal Flows）：水平父容器中垂直子元素的尺寸计算与基线对齐 大家好，今天我们深入探讨一个在CSS布局中经常遇到的复杂问题：正交流（Orthogonal Flows）场景下的尺寸计算与基线对齐，特别是当水平方向的父容器包含垂直方向的子元素时。 这种布局方式虽然看起来简单，但涉及到许多细节，理解这些细节对于构建稳健且可预测的UI至关重要。 1. 什么是正交流（Orthogonal Flows）？ 正交流简单来说就是指父元素和子元素的流动方向不同。更具体地说，当父元素以水平方向（例如 display: flex; flex-direction: row; 或 display: inline-flex; flex-direction: row; 或者 display: grid; grid-auto-flow: column;）排列其子元素，而子元素本身的内容或其内部布局是垂直方向的（例如文本、块级元素、或者 display: flex; flex-direction: column; 或者 display: grid; grid-auto-flow …
双向文本算法（BiDi Algorithm）：`unicode-bidi: isolate` 与 `direction: rtl` 的重排逻辑
双向文本算法 (BiDi Algorithm): unicode-bidi: isolate 与 direction: rtl 的重排逻辑 大家好，今天我们来深入探讨双向文本算法（BiDi Algorithm），重点关注 unicode-bidi: isolate 和 direction: rtl 这两个 CSS 属性对文本重排的影响。理解 BiDi 算法对于正确显示包含从左至右 (LTR) 和从右至左 (RTL) 文本混合的内容至关重要，特别是在国际化 Web 应用中。 1. BiDi 算法基础 BiDi 算法的核心目标是将包含不同书写方向的文本段落正确地排列。它由 Unicode 标准定义，并在各种文本渲染引擎中实现。算法主要分为以下几个步骤： 段落分解： 将文本分解为段落，通常以换行符或 HTML 块级元素为界。 隐式方向性解析： 根据 Unicode 字符的固有方向性（例如，拉丁字母是 LTR，阿拉伯字母是 RTL）分配基本方向性级别。 显式方向性标记处理： 处理显式的方向性标记，如 LRE (Left-to-Right Embedding), RLE (Right-to-Le …
继续阅读“双向文本算法（BiDi Algorithm）：`unicode-bidi: isolate` 与 `direction: rtl` 的重排逻辑”
垂直书写模式（Vertical Writing Modes）：`vertical-rl` 下的盒模型旋转与流向计算
垂直书写模式（Vertical Writing Modes）：vertical-rl 下的盒模型旋转与流向计算 大家好，今天我们来深入探讨 CSS 中的垂直书写模式，特别是 vertical-rl 模式下的盒模型旋转和流向计算。垂直书写模式在处理亚洲语言（如中文、日文、韩文）的排版时至关重要，它定义了文本的排列方向以及元素在页面上的布局方式。vertical-rl 是一种从右到左、自上而下的垂直书写模式。理解其背后的机制，能帮助我们更好地控制页面布局，创建更符合语言习惯的用户界面。 1. 书写模式（Writing Modes）简介 在深入 vertical-rl 之前，我们先简单回顾一下 CSS 中书写模式的概念。书写模式（writing-mode 属性）定义了文本的行进方向，以及块级元素的排列方向。常见的取值包括： horizontal-tb：水平方向，从上到下（默认值）。文本水平排列，行从上到下堆叠。 vertical-rl：垂直方向，从右到左。文本垂直排列，行从右到左堆叠。 vertical-lr：垂直方向，从左到右。文本垂直排列，行从左到右堆叠。 还有一些其他的取值，比如 si …
继续阅读“垂直书写模式（Vertical Writing Modes）：`vertical-rl` 下的盒模型旋转与流向计算”
CSS 变量注入：利用 `–var` 注入恶意载荷绕过过滤器的分析
CSS 变量注入：利用 –var 注入恶意载荷绕过过滤器的分析 各位同学，大家好。今天我们来深入探讨一个比较隐蔽但威力强大的安全漏洞：CSS 变量注入。这种漏洞允许攻击者利用 CSS 变量（custom properties，以 — 开头的属性）注入恶意载荷，绕过各种输入验证和过滤机制，最终实现跨站脚本攻击（XSS）等危害。 1. CSS 变量简介：不仅仅是样式 CSS 变量是 CSS3 引入的一项强大特性，允许开发者在 CSS 中定义和使用变量。它们可以用于存储颜色、字体大小、间距等样式属性值，并在整个文档中复用。 基本语法： 定义变量： 使用 –变量名: 变量值; 在:root 或其他元素中定义变量。 使用变量： 使用 var(–变量名) 函数来引用变量。 示例： :root { –primary-color: #007bff; –font-size: 16px; } body { font-size: var(–font-size); color: var(–primary-color); } .button { background-color: var(–p …
`Content-Security-Policy` (CSP) 中的样式策略：`style-src` 与 `nonce` 的哈希验证
Content-Security-Policy (CSP) 中的样式策略：style-src 与 nonce 的哈希验证 大家好，今天我们要深入探讨 Content-Security-Policy (CSP) 中关于样式（CSS）安全的核心策略：style-src 指令和如何使用 nonce 和哈希值进行更精细的控制与验证。CSP 是一个强大的安全工具，旨在减轻跨站脚本攻击 (XSS) 风险，而 style-src 是 CSP 中用于管理 CSS 资源加载的关键组成部分。 CSP 简介与 style-src 的作用 CSP 本质上是一个声明式的安全策略，服务器通过 HTTP 响应头 Content-Security-Policy 将策略发送给浏览器。浏览器接收到策略后，会遵循策略的指示，决定哪些资源可以加载，哪些资源应该被阻止。 style-src 指令规定了哪些来源的 CSS 资源可以被加载。这包括： ‘self’: 允许加载来自同一来源（协议、域名和端口）的 CSS。 ‘unsafe-inline’: 允许加载 HTML 文档中内联的 <style> 标签和 style …
继续阅读“`Content-Security-Policy` (CSP) 中的样式策略：`style-src` 与 `nonce` 的哈希验证”
CSS Exfiltration：利用连字（Ligatures）与自定义字体宽度推断文本内容
CSS Exfiltration：利用连字（Ligatures）与自定义字体宽度推断文本内容 大家好，今天我们来探讨一个比较隐蔽但潜在危害很大的安全问题：CSS Exfiltration，并且重点关注如何利用连字（Ligatures）与自定义字体宽度来推断文本内容，从而实现数据窃取。 这是一种利用CSS特性，绕过同源策略 (Same-Origin Policy, SOP) 的限制，从受害者网站提取敏感信息的技术。 什么是 CSS Exfiltration CSS Exfiltration 本质上是一种利用CSS选择器、属性和值的特性，将用户浏览器中的数据通过网络发送到攻击者控制的服务器上的技术。 通常，这是通过精心构造的CSS规则实现的，这些规则会根据页面上的特定内容触发不同的网络请求。 传统的攻击方式可能依赖于： 属性选择器: 检查页面元素是否包含特定的属性和值。 伪类选择器: 如:hover，:active，:focus等，基于用户的交互来触发行为。 content属性: 配合::before和::after伪元素，动态生成内容并发送请求。 background-image 属性: …