Repository navigation
[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
Activity
huycozy commentedon Nov 14, 2023
Hi @HaijunWei
I don't see you use
PingFang SCfont in the Code sample. Is it missing or intentional?HaijunWei commentedon Nov 14, 2023
Sorry, I forgot to explain. In order to reproduce the problem, the above code does not need to add the
PingFang SCfont.Question 1 If you add
PingFang SCfont, w500 will render normally[-]Impeller bug.[/-][+][Impeller] font weight and alignment looks off with CJK characters.[/+]jonahwilliams commentedon Nov 14, 2023
This looks like a problem in our glyph atlas. I've retitled the issue for clarity and added it to our backlog. thanks for filling @HaijunWei
jonahwilliams commentedon May 27, 2024
Pulling the bold issue into #149142
flutter-team-archive/engine#53042 will fix all the alignment issues and sizing for most glyphs. The remaining delta is very small:
[Impeller] Use scaled font to determine bounds, match Skia position r…
github-actions commentedon Jun 11, 2024
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.[Impeller] Use scaled font to determine bounds, match Skia position r…