Skip to content

[Web] [CanvasKit][Feature Request]: Load fonts as soon as detecting browser locale #77023

@AscentionOne

Description

@AscentionOne

Currently, when I am testing the TexField I saw a weird effect. Below is the demo (web application).

demo1

As you can see, initially when you typed in the Chinese character, it will show the gibberish character first then render the correct Chinese character. After the first try, it works kinda fine afterward. But sometimes you can still see the gibberish character interchangeably. However, I am not sure if this is the nature of how it is... but to me, something seems wrong here.

Here is another demo for Japanese!

demo2_jp

Based on @yjbanov commented in #76473, it might be flutter loading fonts dynamically. Flutter detects that it doesn't have enough fonts and that is likely the reason.

flutter doctor -v
[√] Flutter (Channel beta, 1.26.0-17.6.pre, on Microsoft Windows [Version 10.0.19041.804], locale zh-TW)
    • Flutter version 1.26.0-17.6.pre at D:\flutterdevelopment\flutter     
    • Framework revision a29104a69b (5 days ago), 2021-02-16 09:26:56 -0800
    • Engine revision 21fa8bb99e
    • Dart version 2.12.0 (build 2.12.0-259.12.beta)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2) 
    • Android SDK at D:\androidsdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_SDK_ROOT = D:\androidsdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java       
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe      

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.53.2)
    • Flutter extension version 3.19.0

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.182
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 88.0.705.56

Originally posted by @AscentionOne in #76473 (comment)

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: internationalizationSupporting other languages or locales. (aka i18n)a: text inputEntering text in a text field or keyboard related problemsa: typographyText rendering, possibly libtxtc: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterc: renderingUI glitches reported at the engine/skia or impeller rendering levele: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webplatform-webWeb applications specificallyteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions