Repository: flutter
Issue: Text is rendered thinner on web (canvaskit) compared to macos desktop
Labels: engine,a: quality,a: typography,platform-web,e: web_canvaskit,has reproducible steps,P2,team-web,triaged-web,found in release: 3.13,found in release: 3.17

### Is there an existing issue for this?

- [X] I have searched the [existing issues](https://github.com/flutter/flutter/issues)
- [X] I have read the [guide to filing a bug](https://flutter.dev/docs/resources/bug-reports)

### Steps to reproduce

Create a new Project with the following `main.dart`

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(),
      home: const Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);

  Widget _fontAsset({
    required String text,
    required double fontSize,
    required FontWeight fontWeight,
    double? height,
    required Color color,
  }) =>
      Center(
        child: Container(
          decoration: BoxDecoration(border: Border.all(color: Colors.blue)),
          child: Text(
            text,
            style: TextStyle(
              fontFamily: 'IBM Plex Sans',
              fontSize: fontSize,
              fontWeight: fontWeight,
              height: height,
            ),
          ),
        ),
      );

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        //
        _fontAsset(
          text: "DRIVE SPEICHER",
          fontSize: 14,
          // height: 18 / 14,
          color: darkGrey1A,
          fontWeight: fontWeightRegular,
        ),
        _fontAsset(
          text: "10 GB von max. 1000 GB",
          fontSize: 12,
          // height: 15 / 12,
          color: darkGrey1A,
          fontWeight: fontWeightRegular,
        ),
      ],
    );
  }

  static const Color darkGrey1A = Color(0xFF1A1A1A);
  static const fontWeightRegular = FontWeight.w400;
}
```

Add fonts (can be downloaded here: https://fonts.google.com/specimen/IBM+Plex+Sans)
(Edit: for this example only the `Regular` file is actually needed)
<img width="186" alt="Screenshot 2023-11-03 at 14 13 00" src="https://github.com/flutter/flutter/assets/24209580/f05bec45-b5b6-438f-ae70-38715e9432f3">

Adjust `pubspec.yaml` by adding the fonts
```yaml
flutter:
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  fonts:
    - family: IBM Plex Sans
      fonts:
        - asset: fonts/IBMPlexSans-Medium.ttf
          weight: 500
        - asset: fonts/IBMPlexSans-Regular.ttf
          weight: 400
        - asset: fonts/IBMPlexSans-Light.ttf
          weight: 300
```

Run both for `web` and `macos` and compare the appearance

### Expected results

The fonts should look the same on web and macos desktop

### Actual results

The fonts are rendered noticeably thinner on web than on macos desktop

<img width="499" alt="Screenshot 2023-11-03 at 14 17 12" src="https://github.com/flutter/flutter/assets/24209580/42d2f27b-5d4a-49c6-aaa4-c9ccfeb576a2">


It becomes even more obvious when layering both versions in gimp or photoshop:


https://github.com/flutter/flutter/assets/24209580/f07b64cb-8fdc-4fd4-9029-294c18c8b56f

(In this video, the top layer is the macos version. the layer is turned on and off to compare with the web version below)


____

It is further notable, that the results on macos are closer to results expected when comparing to Adobe XD designs with the same font and text style

### Code sample

See above

### Screenshots or Video

See above

### Logs

<details><summary>Logs</summary>

```console
[Paste your logs here]
```

</details>


### Flutter Doctor output

<details><summary>Doctor output</summary>

```console
$ flutter doctor -v
[✓] Flutter (Channel stable, 3.13.9, on macOS 13.4 22F66 darwin-arm64, locale en-DE)
    • Flutter version 3.13.9 on channel stable at /Users/gian/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d211f42860 (9 days ago), 2023-10-25 13:42:25 -0700
    • Engine revision 0545f8705d
    • Dart version 3.1.5
    • DevTools version 2.25.0

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/gian/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.82.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.76.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.4 22F66 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 119.0.6045.105

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.
```

</details>