css - React native iOS 中的垂直居中自定义字体

Question

将 React Native 与 Expo 结合使用。在 iOS 上难以将自定义导入的字体居中。Android 渲染没有问题，文本完全垂直居中。使用 iOS 时，它略高于中心。

( native 字体在两个模拟器上都能很好地居中 - Android 和 iOS)。

有什么解决办法吗？

代码如下:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Font } from 'expo';

export default class  extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      'KlavikaBold': require('./KlavikaBold.otf'),
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <Expo.AppLoading />;
      }
    return (
      <View style={styles.container}>
        <Text style={styles.content}>Home!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    backgroundColor: 'green',
    color: 'white',
    padding: 10,
    textAlignVertical: 'center',
    fontFamily: 'KlavikaBold',
    fontSize: 20,
  }

})

Answer 1

这是一个对我有用的简单解决方案...

1. Download Font Tools for Xcode
2. In Terminal run $ ftxdumperfuser -t hhea -A d pathtoyourfont.ttf
3. Edit dumped pathtoyourfont.hhea.xml and set lineGap="0"
4. If lineGap was 200 and ascender="800", set ascender to the sum ot these two 1000
5. In Terminal run $ ftxdumperfuser -t hhea -A f pathtoyourfont.ttf

Done. Your new values are fused back the font file.

Repeat steps 4 and 5 until the rendering is OK. Do not change other values. Those should be OK.

Value that finally worked for me was ascender="1050". Try to change the sum until Android and iOS render the component the same height.

来源:https://medium.com/@martin_adamko/consistent-font-line-height-rendering-42068cc2957d