Wie füge ich Schriftarten für verschiedene Schriftartengewichte für ein reaktives natives Android-Projekt hinzu?

Question

Ich habe es geschafft, durch eine eigene Schriftart hinzuzufügen:

• Putting * .ttf Dateien in ProjectName/android/app/src/main/assets/fonts/ wie folgt aus:

  • öffnen Sans.ttf
  • öffnen Sans_italic.ttf
  • Öffnen Sans_bold.ttf
  • Öffnen Sans_bold_italic.ttf

• und Einstellung Schriftfamilie von fontFamily: "Open Sans"

Aber es gibt zusätzliche Schriftschnitte ich wie 'Semi Bold' verwenden wollen, 'Extra Bold'. Ich habe versucht, sie als 'Open Sans_900.ttf' und Einstellung fontWeight: 900 hinzufügen, aber das hat nicht funktioniert, es fett Version der Schriftart angezeigt.

Gibt es eine Möglichkeit, diese zusätzlichen Schriftarten hinzuzufügen?

Answer 1

Ich lief in das gleiche Problem und musste „neue Schriften“ machen aus den Schriftstärke Dateien

mit so etwas wie FontForge (wie es durch den Namen der Schriftart nicht der Dateiname funktioniert) - laden Sie die Schriftstärke Datei (zB Open Sans_bold.ttf) und benenne sie in "Open Sans Bold" (der tatsächliche Name nicht der Dateiname) und dann verwenden Sie das als fontFamily in react-native (offensichtlich fügen Sie diese Schriftart zu Ihrem Projekt) So werden Sie 2 haben Schriftdateien: "Open Sans" und "Open Sans Bold"

Hoffe, das hilft!

Answer 2

Die Standardunterstützung für benutzerdefinierte Schriftarten auf Android ist in React Native etwas eingeschränkt. Es unterstützt keine anderen Schriftarten als normal und bold (es unterstützt auch die italicfontStyle). Wenn Sie andere benutzerdefinierte Gewichtungen möchten, müssen Sie sie als separate Schriftarten mit einem anderen Namen hinzufügen (wie David in seiner Antwort erwähnt).

Die einzigen Schriftartdateien, die RN sind im folgenden Format finden:

• {fontFamilyName}
• {fontFamilyName}_bold
• {fontFamilyName}_italic
• {fontFamilyName}_bold_italic

Unterstützte Erweiterungen: .ttf und .otf

Das ist wirklich nirgendwo dokumentiert (die ich kenne), aber Sie können den Font Manager Code hier lesen: https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactFontManager.java

Answer 3

Hier sind meine Empfehlung:

In Ihrem assets/fonts/, Sie setzen die folgende Dateien:

YourFont-Regular.tff

YourFont-Bold.tff

react-native link it und in Ihre Designs, tun Sie:

const styles = StyleSheet.create({ 
    text: { 
    fontFamily: 'YourFont-Regular', 
    color: '#336666', 
    backgroundColor: 'transparent', 
    }, 
    bold: { 
    fontFamily: 'YourFont-Bold', 
    }, 
    }) 

Dann Ihr es so machen in:

<Text style={[styles.text, bold]}>Hello World</Text> 

Dieser Ansatz sowohl auf Android und iOS funktioniert.