Skip to content

Flutter Fonts are not rendering correctly, Antialiasing is doubled on desktop #67034

@SuperGNUS

Description

@SuperGNUS

Steps to Reproduce

Use the code below in a widget to render the text in MacOS, Web and compare to Photoshop or Sketch rendering of the text.

Details

Render text with Kerning is not working and rendering system is double sampling antialiasing on fonts on MacOS at least.
Kerning is not working on web rendering either.

The following screen shot shows the difference, the top text is from the Sketch app and rendered at size on a Mac.

The second set of text is rendered in the MacOS APP generated code. My guess is that the TTF font is being rendered with antialiasing to a texture and then the image is placed BLIT'd as a texture also with antialiasing resulting in thicker font. This is pretty clear on the 'our' of 'Your' at the top of each letter and also does not happen with the web renderer. This oversampling causes blurred letters.

The third line of text is the web rendered code and you can see the Kerning is not correct and is ignored but at least the sampling is correct.

Screen Shot 2020-09-30 at 10 04 00 PM

Expected results:

All text in the fonts should match layout and kerning.

        Positioned(
          left: 16.895999999999958,
          bottom: 69.69599999999997,
          child: Container(
              width: 229.00,
              height: 19.01,
              child: Text(
                'Your Genius Token address:',
                style: TextStyle(
                  fontFamily: 'Prompt',
                  fontSize: 12.672,
                  fontWeight: FontWeight.w500,
                  fontStyle: FontStyle.normal,
                  letterSpacing: 0.32,
                  color: Colors.white,
                ),
                textAlign: TextAlign.left,
              )),
        ),

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: desktopRunning on desktopa: typographyText rendering, possibly libtxtc: renderingUI glitches reported at the engine/skia or impeller rendering levelcustomer: ariasengineflutter/engine related. See also e: labels.f: inspectorPart of widget inspector in framework.found in release: 1.22Found to occur in 1.22found in release: 2.0Found to occur in 2.0found in release: 2.3Found to occur in 2.3has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-linuxBuilding on or for Linux specificallyplatform-macBuilding on or for macOS specificallyplatform-webWeb applications specificallyplatform-windowsBuilding on or for Windows specificallyteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions