如何将UIFont转换为匹配的CSS字体样式（重点解决字重适配问题）

原有实现的核心偏差点 #

• 字体名取值逻辑错误：原代码中let fontFamily = self.fontName == self.familyName 得到的是布尔值，最终会把true/false字符串拼入CSS，完全无法匹配字体
• 字重判断粒度不足：仅靠traitBold判断只有粗/非粗两档，无法覆盖iOS定义的9档连续字重，和原生渲染有偏差
• 字号缺少单位：纯数字字号会被浏览器按相对单位解析，导致大小错位
• 硬编码系统字体名：直接写.AppleSystemUIFont无法适配不同形态的系统字体（衬线、等宽、圆角），容易出现字体回退

精准字重映射规则 #

iOS的系统字体字重是连续取值，存储在字体描述符的trait属性中，数值范围为-1.0（超轻）到1.0（超黑），可以直接线性映射为CSS标准的数值字重（范围100-900），映射比例完全对齐视觉效果：

• .ultralight(-0.8) → CSS字重100
• .thin(-0.6) → CSS字重200
• .light(-0.4) → CSS字重300
• .regular(0.0) → CSS字重400
• .medium(0.23) → CSS字重500
• .semibold(0.3) → CSS字重600
• .bold(0.4) → CSS字重700
• .heavy(0.56) → CSS字重800
• .black(0.62) → CSS字重900

注意：不要使用normal/bold/bolder这类CSS关键字，这类值是浏览器自定义映射的，和iOS原生字重的视觉表现存在固定偏差，必须用计算后的数值字重传递 #

系统字体的正确取值方式 #

不需要硬编码.AppleSystemUIFont这类内部名，直接读取UIFont实例的fontName属性即可：

• 系统会自动给不同形态的系统字体（常规、衬线、等宽、圆角）分配对应的内部CSS兼容名
• 读取到的fontName值可以直接写入CSS的font-family规则，不需要额外转换

自定义字体的适配逻辑 #

对于打包进App的自定义字体，只要通过WKURLSchemeHandler拦截本地字体资源请求，在页面加载前注入对应的@font-face规则，指定本地字体文件的访问路径，就可以实现和原生UIFont完全一致的渲染——因为Web端和原生端使用的是同一份字体文件，不存在渲染偏差。 #

修正后的可直接落地的UIFont扩展实现 #

extension UIFont {
    /// 生成与原生渲染完全对齐的CSS样式片段
    /// - Parameter color: 文本颜色
    /// - Returns: 可直接嵌入style属性的CSS字符串
    func matchedCSSStyle(color: UIColor) -> String {
        // 转换颜色为支持透明度的CSS rgba格式
        var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0, alpha: CGFloat = 0
        color.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        let colorCSS = "rgba(\(Int(red * 255)), \(Int(green * 255)), \(Int(blue * 255)), \(alpha))"
        
        // 读取真实字体名，替代原逻辑的布尔值错误
        let fontFamilyCSS = fontName
        
        // 从字体描述符提取原始字重值，线性映射为CSS数值字重
        let fontTraits = fontDescriptor.object(forKey: .traits) as? [UIFontDescriptor.TraitKey: Any]
        let originalWeight = (fontTraits?[.weight] as? CGFloat) ?? 0
        let fontWeightCSS = Int(400 + originalWeight * 500)
        
        // 斜体判断
        let isItalic = fontDescriptor.symbolicTraits.contains(.traitItalic)
        let fontStyleCSS = isItalic ? "italic" : "normal"
        
        // 字号带px单位，和iOS point值1:1对齐（无系统缩放场景下）
        let fontSizeCSS = pointSize
        
        // 补充行高匹配，解决纯字体对齐后行高不一致的问题
        let lineHeightCSS = lineHeight
        
        return """
        font-family: '\(fontFamilyCSS)';
        font-size: \(fontSizeCSS)px;
        font-weight: \(fontWeightCSS);
        font-style: \(fontStyleCSS);
        line-height: \(lineHeightCSS)px;
        color: \(colorCSS);
        """
    }
}

渲染对齐的关键细节 #

• 字号必须加px后缀，纯数字会被浏览器按相对单位解析，导致大小错位
• 全程使用数值字重，不要用相对字重关键字，避免浏览器二次计算带来的偏差
• 保持WebView默认的文字抗锯齿设置，不要自定义-webkit-font-smoothing属性，和UIKit的抗锯齿逻辑保持一致
• 若用户开启了动态字体大小适配，需要在CSS里同步监听UIContentSizeCategory的变化，动态替换字号值，否则会出现字体大小不匹配

内容的提问来源于stack exchange，提问作者de.