SwiftUI Italic text clipping

Question

I noticed that a Text with .italic() clips letters:

Setting frame size doesn't help:

.paddings() doesn't help either. kerning(5) I don't want to use as it fixes the problem partially, at the right edge only, but it adds unwanted letter spacing.

struct ItalicTest: View {
var body: some View {
    Text("F")
        .font(Font.system(size: 60))
        .italic()
        .fontWeight(.black)
        .frame(width: 60, height: 60)
        .background(Color.red)
    }
}

I'd like to prevent clipping. Do you know a solution using pure SwiftUI?

Answer 1

I know this is an old question, but I just had the same issue and found a propper solution.

You will have to add padding to your text and ask swiftui to collapse the padding and text before rendering it.

struct ItalicTest: View {
var body: some View {
    Text("F")
        .font(Font.system(size: 60))
        .italic()
        .fontWeight(.black)
        .padding(.horizontal) // <-- add padding
        .drawingGroup() // collapse the view and render together
    }
}