在 swift 5 中解析 Html 时强标签中的问题

Question

您好，我在将 Html 解析为 UILabel 中的 NSAtributtedString 时遇到了问题。 问题出在强文本中，结果太粗（我猜在解析字体时将字体更改为“GibsonBold”并且我需要 GibsonSemibold，甚至从常规更改为中。我尝试将标签更改为 或实现一个风格，但结果总是一样的。我也尝试了几个扩展，但结果都是一样的。

这是 html 字符串：

"<p>First text <strong> this text should be at lest Semibold</strong>. Final text.</p>"

我使用这两个扩展来解析：

extension UIColor {
    var hexString:String? {
        if let components = self.cgColor.components {
            let r = components[0]
            let g = components[1]
            let b = components[2]
            return  String(format: "%02X%02X%02X", (Int)(r * 255), (Int)(g * 255), (Int)(b * 255))
        }
        return nil
    }
}

extension String {
    var html2Attributed: NSAttributedString? {
        do {
            guard let data = data(using: String.Encoding.utf8) else {
                return nil
            }
            return try NSAttributedString(data: data,
                                          options: [.documentType: NSAttributedString.DocumentType.html,
                                                    .characterEncoding: String.Encoding.utf8.rawValue],
                                          documentAttributes: nil)
        } catch {
            print("error: ", error)
            return nil
        }
    }
    
    var htmlAttributed: (NSAttributedString?, NSDictionary?) {
        do {
            guard let data = data(using: String.Encoding.utf8) else {
                return (nil, nil)
            }

            var dict:NSDictionary?
            dict = NSMutableDictionary()

            return try (NSAttributedString(data: data,
                                          options: [.documentType: NSAttributedString.DocumentType.html,
                                                    .characterEncoding: String.Encoding.utf8.rawValue],
                                          documentAttributes: &dict), dict)
        } catch {
            print("error: ", error)
            return (nil, nil)
        }
    }
    
    func htmlAttributed(using font: UIFont, color: UIColor, lineHeight: CGFloat) -> NSAttributedString? {
        do {
            let htmlCSSString = "<style>" +
                "html *" +
                "{" +
                "font-size: \(font.pointSize * 0.75)pt !important;" +
                "color: #\(color.hexString!) !important;" +
                "font-family: \(font.familyName), Helvetica !important;" +
                "line-height: \(lineHeight * 0.06) !important;" +
                "}</style> \(self)"

            guard let data = htmlCSSString.data(using: String.Encoding.utf8) else {
                return nil
            }

            return try NSAttributedString(data: data,
                                          options: [.documentType: NSAttributedString.DocumentType.html,
                                                    .characterEncoding: String.Encoding.utf8.rawValue],
                                          documentAttributes: nil)
        } catch {
            print("error: ", error)
            return nil
        }
    }
}

以及标签中的实现：

descriptionLabelText.attributedText = description.htmlAttributed(using: UIFont.gibsonRegular.withAdjustedSize(16),
                                                                    color: .greyscale800,
                                                                    lineHeight: 20.adjusted)

Answer 1

目前所有的 css 样式只定义了要使用的字体和字体大小，而不是真正的 style（粗体、斜体、常规等）或 weights（正常、粗体、浅色等）所以这些标签选择设置标签的默认样式。

我创建了以下 HTML

let htmlString
            = "<p>Normal text <strong> Strong set to 600 font weight </strong>. <b> Bold set to italic style </b>"

然后我像这样使用你的代码

label.attributedText = htmlString.htmlAttributed(using: UIFont(name: "Gibson-Regular",
                                                               size: 16)!,
                                                 color: .red,
                                                 lineHeight: 20)

这给了我你现在可能看到的以下结果

如果您正确地将所有字体（Gibson 常规、粗体、斜体）添加到文件系统中，则可以在 CSS 中添加特定样式。

对您的 func htmlAttributed 的小改动

func htmlAttributed(using font: UIFont,
                    color: UIColor,
                    lineHeight: CGFloat) -> NSAttributedString? {
    do {
        let htmlCSSString = "<style>" +
            "html *" +
            "{" +
            "font-size: \(font.pointSize * 0.75)pt !important;" +
            "color: #\(color.hexString!) !important;" +
            "font-family: \(font.familyName), Helvetica !important;" +
            "line-height: \(lineHeight * 0.06) !important;" +
            "}" +
            
            // customize bold
            "b" +
            "{" +
            "font-size: \(font.pointSize * 0.75)pt !important;" +
            "font-style: italic;" + // I set bold to be italic
            "font-family: \(font.familyName), Helvetica !important;" +
            "line-height: \(lineHeight * 0.06) !important;" +
            "}" +
            
            // customize strong font weight
            // https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
            "strong" +
            "{" +
            "font-size: \(font.pointSize * 0.75)pt !important;" +
            "font-weight: 600;" + // customize weight to what you want
            "font-family: \(font.familyName), Helvetica !important;" +
            "line-height: \(lineHeight * 0.06) !important;" +
            "}" +
            
            "}</style> \(self)"
        
        guard let data = htmlCSSString.data(using: String.Encoding.utf8) else {
            return nil
        }
        
        return try NSAttributedString(data: data,
                                      options: [.documentType: NSAttributedString.DocumentType.html,
                                                .characterEncoding: String.Encoding.utf8.rawValue],
                                      documentAttributes: nil)
    } catch {
        print("error: ", error)
        return nil
    }
}

通过此更改，您将看到strong 标签的权重发生了一些变化，我将b 标签呈现为斜体

最后，据我所知，你不能将粗细设置为Semi Bold，所以如果你想使用Semi Bold字体，你已经明确地将它设置为你想要使用的字体。

所以你可以自定义强标签：

// I set font family to Gibson italic for example
// You can set it to semi bold font
"strong" +
"{" +
"font-size: \(font.pointSize * 0.75)pt !important;" +
"font-family: \(UIFont(name: "Gibson-Italic", size: 16)!), Helvetica !important;" +
"line-height: \(lineHeight * 0.06) !important;" +
"}" +

我认为这应该会给您一些关于如何定制以适合您的解决方案的想法