Repository: flutter
Issue: [web] Width/height of variable font bounds calculated incorrectly in html web-renderer
Labels: framework,a: typography,platform-web,c: rendering,e: web_html,has reproducible steps,P2,found in release: 3.3,found in release: 3.7,team-web,triaged-web

## Steps to Reproduce



1. Extract archive with example project [variable_font_issue.zip](https://github.com/flutter/flutter/files/10415751/variable_font_issue.zip), or 
    - create a new one and replace: main.dart, asset folder (from the archive) and .yaml
2. Execute `flutter run -d chrome --web-renderer html`


> On Android everything is fine

**Expected results 😎**

<img width="451" alt="android" src="https://user-images.githubusercontent.com/19698358/212427254-8150baa9-105b-4f66-ad3c-04196c6e12ee.png">


**Actual results 😢**

<img width="379" alt="web" src="https://user-images.githubusercontent.com/19698358/212427346-37acc52b-ff9d-4446-9dc5-9da6269a086b.png">


```yaml

# pubspec.yaml
# ...

flutter:

  fonts:
    - family: Montserrat
      fonts:
        - asset: assets/fonts/Montserrat-VF.ttf
```

```dart

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Font variant issue :(',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {

    const boldStyle = TextStyle(
        fontFamily: 'Montserrat',
        fontSize: 15,
        color: Colors.black,
        fontVariations: [FontVariation('wght', 900)],
        fontFeatures: [FontFeature.tabularFigures()]);

    return Scaffold(
        body: Container(
            width: double.infinity,
            color: Colors.blueGrey,
            child: Column(children: const [
              Text("\n\n\n\n\n"),
              ColoredBox(
                  color: Colors.greenAccent,
                  child: Text("INF 54684732154328",
                      style: TextStyle(fontFamily: 'Montserrat', fontSize: 15, color: Colors.black, fontVariations: [FontVariation('wght', 900)]))),
              ColoredBox(
                  color: Colors.greenAccent,
                  child: Text("INF 54684732154328",
                      style: TextStyle(fontFamily: 'Montserrat', fontSize: 15, color: Colors.black, fontVariations: [FontVariation('wght', 100)]))),
              ColoredBox(
                  color: Colors.greenAccent,
                  child: Text("INF 54684732154328",
                      style: TextStyle(fontFamily: 'Montserrat', fontSize: 15, color: Colors.black, fontVariations: [FontVariation('wght', 400)]))),
              Text("\n\n\n\n\n"),
              ColoredBox(
                  color: Colors.cyanAccent,
                  child: Text("INF 54684732154328", style: boldStyle)),
              ColoredBox(
                  color: Colors.cyanAccent,
                  child: Text("INF 13580564231678", style: boldStyle)),
              ColoredBox(
                  color: Colors.cyanAccent,
                  child: Text("INF 11111777744555", style: boldStyle)),
            ])));
  }
}


```


<details>
  <summary>Logs</summary>

```
[√] Flutter (Channel stable, 3.3.10, on Microsoft Windows [Version 10.0.22621.1105], locale en-US)
    • Framework revision 135454af32 (4 weeks ago), 2022-12-15 07:36:55 -0800
    • Engine revision 3316dd8728
    • Dart version 2.18.6
    • DevTools version 2.15.0

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Platform android-31, build-tools 33.0.1
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web

[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.0.6)
    • Visual Studio Community 2022 version 17.0.32126.317
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 4.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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 1.8.0_242-release-1644-b01)

[√] IntelliJ IDEA Ultimate Edition (version 2022.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2022.2.2
    • Flutter plugin version 71.3.6
    • Dart plugin version 223.8214.16

[√] VS Code (version 1.74.2)
[√] Connected device (4 available)
    • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Windows (desktop)           • windows       • windows-x64    • Microsoft Windows [Version 10.0.22621.1105]
    • Chrome (web)                • chrome        • web-javascript • Google Chrome 109.0.5414.74
    • Edge (web)                  • edge          • web-javascript • Microsoft Edge 107.0.1418.56

[√] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

```

</details>

Looking forward to hotfix 😃