解决PSD转HTML5文字乱码需五步：一、HTML顶部声明UTF-8编码；二、CSS使用Web安全字体族并兜底sans-serif；三、通过@font-face嵌入WOFF2/WOFF字体；四、关键文字导出为SVG或PNG；五、Photoshop启用生成器并规范图层命名。
如果您将PSD文件中的文字直接转换为HTML5代码，可能会出现乱码问题，这通常与字体未正确嵌入或未声明字符编码有关。以下是解决此问题的步骤：
一、确认HTML5文档字符编码声明
HTML5页面必须明确指定UTF-8字符编码，否则浏览器可能以默认编码（如GBK）解析，导致中文显示为乱码。确保在
内顶部位置添加正确的meta声明。1、在HTML文件的
标签内部最上方插入代码行。2、输入。
立即学习“前端免费学习笔记（深入）”；
3、保存文件后用浏览器重新加载页面验证是否仍存在乱码。
二、使用Web安全字体替代非嵌入字体
Photoshop中使用的字体若未在目标设备上安装，且未通过@font-face嵌入，浏览器将回退到系统默认字体，可能造成样式偏差或部分字符缺失。采用通用字体族可规避依赖本地字体的风险。
1、在CSS中将font-family属性设置为包含多个备选字体的列表。
2、例如：font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
3、确保列表末尾保留sans-serif作为最终兜底字体。
三、通过@font-face嵌入自定义字体
当设计稿中使用了特殊字体（如思源黑体、站酷酷黑等），需将字体文件（WOFF2/WOFF格式）部署至服务器，并在CSS中注册该字体，使HTML能主动下载并渲染。
1、将字体文件上传至项目目录下的fonts/子文件夹。
2、在CSS文件中添加@font-face规则，src指向字体路径，font-family指定别名。
3、在对应文字元素的CSS中调用该font-family别名，例如：font-family: "ZCOOL KuHei";
四、导出文字为SVG或PNG替代纯文本
对于少量关键标题文字或无法授权嵌入的商用字体，可将文字图层导出为矢量SVG或高清PNG，避免字体缺失引发的乱码与渲染差异，同时保持清晰度。
1、在Photoshop中右键点击文字图层，选择“栅格化文字”（若需导出PNG）或“转换为智能对象”（便于缩放）。
2、使用“文件→导出→导出为”，选择SVG格式并勾选“输出CSS属性”选项。
3、将生成的SVG代码内联插入HTML，或以标签引用PNG资源，设置alt属性补充语义。
五、检查Photoshop导出设置中的文本处理选项
使用Adobe Generator或第三方插件（如PS2HTML）自动切图时，若未启用“导出文本为HTML”或“保留字体信息”选项，工具会忽略文字图层原始内容，仅输出位图，导致后续无法编辑或搜索文本。
1、进入Photoshop首选项→增效工具，勾选“启用旧版扩展面板”（如适用）。
2、在图层面板右上角菜单中启用“生成器”功能。
3、为文字图层命名时使用符合CSS类名规范的名称，例如：title-h1，以便导出工具识别并生成对应HTML结构。
