为什么使用jetpack配置roboto flex的排版API的渲染与使用GenericFontFamily访问的roboto不同?

问题描述 投票:0回答:1

示例代码如下,但正如您在图像中看到的,系统使用 jetpack compose Typography API(最后一个字符)提供的 roboto 字体比使用默认 Typography 配置的 roboto 字体(GenericFontFamily/第一个字符)。

      Row {
            MaterialTheme {
                Column {
                    Box(
                        modifier = Modifier.border(
                            1.dp, color = Color.Black
                        )
                    ) {
                        Text(
                            testText,
                            style = MaterialTheme.typography.headlineLarge.copy(
                                //                                fontSynthesis = FontSynthesis.None
                            ),
                            maxLines = 1,
                        )
                    }
                }
            }

            MaterialTheme(
                typography = proximaTypography(),
            ) {
                Column {
                    Box(
                        modifier = Modifier.border(
                            1.dp, color = Color.Black
                        )
                    ) {
                        Text(
                            testText,
                            style = MaterialTheme.typography.headlineLarge.copy(
                                //                                fontSynthesis = FontSynthesis.None
                            ),
                            maxLines = 1,
                        )
                    }
                }
            }

            MaterialTheme(
                typography = robotoTypography(),
            ) {
                Column {
                    Box(
                        modifier = Modifier.border(
                            1.dp, color = Color.Black
                        )
                    ) {

                        Text(
                            testText,
                            style = MaterialTheme.typography.headlineLarge.copy(
                                //                                fontSynthesis = FontSynthesis.None
                            ),
                            maxLines = 1,
                        )
                    }
                }
            }
        }

完整来源:

https://github.com/dazza5000/fontsforever/tree/master

注:

将 includeFontPadding 设置为 false 会导致更一致的渲染,如下所示

fonts android-jetpack-compose typography text-styling
1个回答
0
投票

据我发现,这是由于字体填充造成的。在 jetpack compose Material 3 组件的未来版本中,默认情况下禁用字体填充

来源:

https://github.com/androidx/androidx/blob/5adfd65a71104d049c05c6cd845420ec28018a57/compose/material/material/src/androidMain/kotlin/androidx/compose/material/DefaultPlatformTextStyle.android.kt#L21

与此同时,我们可以使用以下方法手动禁用它

    platformStyle = PlatformTextStyle(
    includeFontPadding = false
),

https://developer.android.com/reference/kotlin/androidx/compose/ui/text/ParagraphStyle#platformStyle()

© www.soinside.com 2019 - 2024. All rights reserved.