Repository: flutter
Issue: [Web] Typography material2018 and material2021 have broken kernings for HTML web renderer
Labels: engine,a: typography,platform-web,e: web_html,has reproducible steps,P3,found in release: 3.3,found in release: 3.5,team-web,triaged-web

## Background

I discovered this while migrating to `useMaterial3: true`.  The build looks find on mobile and with `web-renderer canvas` but the text makes my brain hurt with `web-renderer html`.

Material 3 isn't the culprit though, it just uses `Typography.material2021`, instead of `Typography.material2014`.

## Steps to Reproduce

<!-- Please include full steps to reproduce so that we can reproduce the problem. -->

1. Execute `flutter run -d chrome --web-renderer html` on the code sample <!-- (see "Code sample" section below) -->

**Expected results:** <!-- what did you want to see? -->
Body text with regular kerning

**Actual results:** <!-- what did you see? -->
Body text with irregular kerning

<details>
<summary>Code sample</summary>

<!--
      Please create a minimal reproducible sample that shows the problem
      and attach it below between the lines with the backticks.

      To create it you can use `flutter create bug` command and update the `main.dart` file.

      Alternatively, you can use https://dartpad.dev/
      which is capable of creating and running small Flutter apps.

      Without this we will unlikely be able to progress on the issue, and because of that
      we regretfully will have to close it.
-->

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.blue,
        typography: Typography.material2021(),
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bug Report'),
      ),
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 400),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Typography on Web',
                style: Theme.of(context).textTheme.displayMedium,
              ),
              Text(
                'Web Renderer: Canvas',
                style: Theme.of(context).textTheme.displaySmall,
              ),
              const SizedBox(height: 32),
              Text(
                'Typography.material2021',
                style: Theme.of(context).textTheme.bodyLarge,
              ),
              const SizedBox(height: 32),
              const Text(
                'This is a body of text.  The spacing gets really funky with Material2021 + Web + HTML renderer.'
                '\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

```

</details>

<details>
  <summary>Logs</summary>

<!--
      Run your application with `flutter run --verbose` and attach all the
      log output below between the lines with the backticks. If there is an
      exception, please see if the error message includes enough information
      to explain how to solve the issue. If there is a crash, please include
      the entirety of the crash log including the backtrace.
-->

```
N/A
```

<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```
[✓] Flutter (Channel stable, 3.3.7, on macOS 12.2.1 21D62 darwin-arm, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.72.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability
```

</details>


<!--
      Consider also attaching screenshots and/or videos to better
      illustrate the issue.

      You can upload them directly on GitHub.
      Beware that video file size is limited to 10MB.
-->
**Screenshots**

Canvas rendering of Material 2021, and HTML rendering with Material2014, Material2018 and Material2021 (combos are described in the screenshots):

| Canvaskit 2021 | HTML 2021 |
| --------------- | --------------- |
<img width="618" alt="2021_canvas" src="https://user-images.githubusercontent.com/1791503/200398053-ef7e61d6-1a19-4133-ae63-44f32c5adabe.png"> | <img width="618" alt="2021_html" src="https://user-images.githubusercontent.com/1791503/200398074-122d3d01-9545-426f-986d-dc2f015e1bb5.png">

| HTML 2014 | HTML 2018 |
| --------------- | --------------- |
<img width="618" alt="2014_html" src="https://user-images.githubusercontent.com/1791503/200398079-01162e6a-e7c4-4a32-9657-4f34fe5df646.png"> | <img width="618" alt="2018_html" src="https://user-images.githubusercontent.com/1791503/200398084-519d4fda-c1bb-4558-96e9-22e8874f9838.png">