Retina屏下Layui layer文字发虚是字体渲染问题，需在.layui-layer-content上设置-webkit-font-smoothing: subpixel-antialiased并移除父级transform样式。
在Retina高分屏上使用Layui layer弹窗时，文字发虚、边缘模糊是高频问题，本质是浏览器对子像素渲染的控制失当，而非Layui代码缺陷。
确认是否为字体渲染问题
先排除其他干扰：打开开发者工具，选中弹窗内任意文字节点，检查其computed样式中font-smoothing和-webkit-font-smoothing是否为空或继承自body。若值为antialiased或未显式设置，大概率就是渲染策略导致发虚。
这一步很关键——如果弹窗文字本身在页面其他区域也模糊，说明是全局CSS或系统级问题；如果仅layer弹窗内模糊，才需针对性处理layer容器。
给layer内容层强制启用子像素渲染
Layer弹窗的内容区域（.layui-layer-content）默认未指定字体平滑策略，在Retina屏下易被浏览器降级为灰度抗锯齿。需在layer.open后立即注入样式：
方法一：通过success回调动态添加style
layer.open({
content: '<div class="layer-text">这是弹窗文字</div>',
success: function(layero){
var content = layero.find('.layui-layer-content');
content.css({
'-webkit-font-smoothing': 'subpixel-antialiased',
'text-rendering': 'optimizeLegibility'
});
}
});
注意：不要用!important覆盖，直接css()赋值即可生效；若内容含iframe，需在iframe内部再执行同类操作。
全局预设layer弹窗字体渲染规则
避免每个弹窗都手动加样式，推荐在CSS中统一拦截：
第一步：在项目主样式表末尾添加
.layui-layer-content, .layui-layer-title {
-webkit-font-smoothing: subpixel-antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: optimizeLegibility !important;
}
第二步：确保该CSS在Layui layer.css之后加载，否则会被覆盖。可通过Chrome DevTools的Styles面板验证是否生效——点击弹窗任意文字，看Computed里-webkit-font-smoothing是否显示为subpixel-antialiased。
第三步：若仍发虚，检查是否有父级容器设置了transform（如scale、translate），它会触发GPU合成并禁用子像素渲染——【必须移除layer父容器上的transform样式】。
针对layer.msg/layer.alert等快捷方法的补丁
这些方法不暴露content DOM，无法用success回调注入样式。此时需劫持其创建逻辑：
① 在Layui加载完成后、首次调用前，重写layer.msg原型：
layer.msg = function(content, options, end){
var defaults = {
skin: 'layui-layer-msg',
time: 3000,
anim: -1
};
options = $.extend({}, defaults, options);
options.success = function(layero){
layero.find('.layui-layer-content').css({
'-webkit-font-smoothing': 'subpixel-antialiased'
});
};
return parent.layer.msg(content, options, end);
};
② 同理修补layer.alert、layer.confirm等所有快捷方法，确保它们创建的弹窗都携带字体渲染声明。
这一步操作起来很简单，直接把上面代码粘贴到Layui引入之后、业务代码之前即可生效。
