[Impeller] font weight and alignment looks off with CJK characters. #138386
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
1、Chinese text fontWeight is invalid.
Add the following code to render normally.
ThemeData(
useMaterial3: false,
textTheme: TextTheme(
bodyMedium: TextStyle(
fontFamilyFallback: Platform.isIOS ? const ['PingFang SC'] : null,
),
titleMedium: TextStyle(
fontFamilyFallback: Platform.isIOS ? const ['PingFang SC'] : null,
),
),
cupertinoOverrideTheme: NoDefaultCupertinoThemeData(
textTheme: CupertinoTextThemeData(
textStyle: TextStyle(
fontFamilyFallback: Platform.isIOS ? const ['PingFang SC'] : null,
),
),
),
)| Before | After |
|---|---|
 |
 |
2、Text thickness is inconsistent.
| Skia | Impeller |
|---|---|
 |
 |
3、CupertinoButton rendering is abnormal.
Text deforms when clicking button. Button size has abnormal scaling.
RPReplay_Final1699930917.mp4
The above test uses iPhone 11, iOS 14.4.
Expected results
Normal like skia.
Actual results
Rendering exception.
Code sample
Question 1 code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: false,
),
home: const Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'1234',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.normal),
),
Text(
'1234',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
),
Text(
'1234',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Text(
'Hello World!',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.normal),
),
Text(
'Hello World!',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
),
Text(
'Hello World!',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Text(
'你好!',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.normal),
),
Text(
'你好!',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
),
Text(
'你好!',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
],
),
),
),
);
}
}Question 2 code sample
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: false,
),
home: Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
UnconstrainedBox(
child: CupertinoButton(
padding: EdgeInsets.zero,
child: Container(
height: 36,
padding: const EdgeInsets.symmetric(horizontal: 12),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(36),
gradient: const LinearGradient(
colors: [Color(0xFFC76F1C), Color(0xFF69320E)],
),
border: Border.all(
color: const Color(0xFFFCE4B7),
),
boxShadow: const [
BoxShadow(
color: Color(0xFF854E1A),
blurRadius: 4,
)
],
),
child: const Text(
'立即查看',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal,
color: Color(0xFFFFF3DE),
),
),
),
onPressed: () {},
),
),
const SizedBox(height: 16),
UnconstrainedBox(
child: CupertinoButton(
padding: EdgeInsets.zero,
child: Container(
height: 36,
padding: const EdgeInsets.symmetric(horizontal: 12),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(36),
gradient: const LinearGradient(
colors: [Color(0xFFC76F1C), Color(0xFF69320E)],
),
border: Border.all(
color: const Color(0xFFFCE4B7),
),
boxShadow: const [
BoxShadow(
color: Color(0xFF854E1A),
blurRadius: 4,
)
],
),
child: const Text(
'立即查看',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Color(0xFFFFF3DE),
),
),
),
onPressed: () {},
),
),
],
),
),
),
);
}
}Question 3 code sample
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: false,
),
home: Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
CupertinoButton(
onPressed: () {},
padding: EdgeInsets.zero,
child: Column(
children: [
Container(
width: 47,
height: 47,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(47),
),
),
const SizedBox(height: 8),
const Text(
'领取福币',
style: TextStyle(
fontSize: 14,
color: Colors.red,
),
),
],
),
),
const SizedBox(height: 16),
UnconstrainedBox(
child: CupertinoButton(
padding: EdgeInsets.zero,
child: Container(
height: 36,
padding: const EdgeInsets.symmetric(horizontal: 12),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(36),
gradient: const LinearGradient(
colors: [Color(0xFFC76F1C), Color(0xFF69320E)],
),
border: Border.all(
color: const Color(0xFFFCE4B7),
),
boxShadow: const [
BoxShadow(
color: Color(0xFF854E1A),
blurRadius: 4,
)
],
),
child: const Text(
'立即查看',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal,
color: Color(0xFFFFF3DE),
),
),
),
onPressed: () {},
),
),
const SizedBox(height: 16),
UnconstrainedBox(
child: CupertinoButton(
padding: EdgeInsets.zero,
child: Container(
height: 36,
padding: const EdgeInsets.symmetric(horizontal: 12),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(36),
gradient: const LinearGradient(
colors: [Color(0xFFC76F1C), Color(0xFF69320E)],
),
border: Border.all(
color: const Color(0xFFFCE4B7),
),
boxShadow: const [
BoxShadow(
color: Color(0xFF854E1A),
blurRadius: 4,
)
],
),
child: const Text(
'立即查看',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Color(0xFFFFF3DE),
),
),
),
onPressed: () {},
),
),
],
),
),
),
);
}
}Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.13.9, on macOS 13.6 22G120 darwin-arm64, locale zh-Hans-CN)
• Flutter version 3.13.9 on channel stable at /Users/haijun/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision d211f42860 (3 weeks ago), 2023-10-25 13:42:25 -0700
• Engine revision 0545f8705d
• Dart version 3.1.5
• DevTools version 2.25.0
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
• Android SDK at /Users/haijun/Library/Android/sdk
• Platform android-33, build-tools 33.0.2
• 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)
• All Android licenses accepted.
[✓] 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.84.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.76.0
[!] Proxy Configuration
• HTTP_PROXY is set
! NO_PROXY is not set
[✓] Connected device (3 available)
• iPhone (6) (mobile) • 00008030-000228D61408802E • ios • iOS 14.4 18D52
• macOS (desktop) • macos • darwin-arm64 • macOS 13.6 22G120 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 119.0.6045.123
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.Metadata
Metadata
Assignees
Labels
Type
Projects
Status