Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 修复字体图标偶现的乱码问题 #2265

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

vsme
Copy link

@vsme vsme commented Dec 6, 2023

修复字体图标在浏览器偶现乱码问题;偶现的乱码主要出现在 浏览器缓存了 CSS 的情况下,刷新页面的时候,在浏览器的调试界面开发者工具中看不到 CSS 文件的加载记录,浏览器会从自己的缓存中读取文件,由于文件没有显式的声明 UTF-8 编码,导致浏览器错误地解析了文件的编码,导致乱码的出现。

告诉浏览器使用 UTF-8 编码解析 CSS 文件,这在处理包含特殊或非拉丁字符的 CSS 文件时尤其重要。

修复 #1738 #1905 #1912

@vsme
Copy link
Author

vsme commented Dec 6, 2023

提交的代码说明:

  1. 在 CSS 中,@charset 规则必须位于文件的最开始处,它之前不能有任何字符,包括空格和注释。这个规则的设计是为了确保浏览器可以尽早地知道如何正确地解析文件中的字符。
  2. 代码中添加一个换行符;这是为了确保该声明与文件中的其他内容清晰地分隔开来,虽然技术上不是强制性的,但出于清晰和规范的编码实践,这样做有助于确保声明与其他 CSS 规则之间有一个明确的分隔,避免潜在的解析问题,并使代码更易于阅读和维护。

@vsme
Copy link
Author

vsme commented Dec 7, 2023

实测:是 缓存中UTF-8 编码的 CSS 文件,被浏览器错误地解析为 ISO-8859 编码,增加编码信息后可以正确解析,没有再次出现乱码。

image

@xlz26296
Copy link
Contributor

样式文件看起来并没有特殊字符

@vsme
Copy link
Author

vsme commented Jan 29, 2024

样式文件看起来并没有特殊字符

但文件中使用了 Unicode 转义序列(\e64d\e738 等),且没有声明 UTF-8 编码,仅靠 http 响应头是不够的(还有缓存),这些转义序列就出现了乱码。

@zhangchenna
Copy link

样式文件看起来并没有特殊字符

但文件中使用了 Unicode 转义序列(\e64d\e738 等),且没有声明 UTF-8 编码,仅靠 http 响应头是不够的(还有缓存),这些转义序列就出现了乱码。

作者没有合并这个问题,有什么从外部解决的办法

@vsme
Copy link
Author

vsme commented Apr 30, 2024

样式文件看起来并没有特殊字符

但文件中使用了 Unicode 转义序列(\e64d\e738 等),且没有声明 UTF-8 编码,仅靠 http 响应头是不够的(还有缓存),这些转义序列就出现了乱码。

作者没有合并这个问题,有什么从外部解决的办法

自己打patch

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants