@expo-google-fonts/阿尔伯特先生

npm version license publish size

此软件包允许您使用 阿尔伯特·桑斯 字体家族从谷歌字体在你的博览会应用.

阿尔伯特·桑斯

Albert Sans

此字体家族包含 18个样式。。。 .

AlbertSans_100Thin
AlbertSans_200ExtraLight
AlbertSans_300Light
AlbertSans_400Regular
AlbertSans_500Medium
AlbertSans_600SemiBold
AlbertSans_700Bold
AlbertSans_800ExtraBold
AlbertSans_900Black
AlbertSans_100Thin_Italic
AlbertSans_200ExtraLight_Italic
AlbertSans_300Light_Italic
AlbertSans_400Regular_Italic
AlbertSans_500Medium_Italic
AlbertSans_600SemiBold_Italic
AlbertSans_700Bold_Italic
AlbertSans_800ExtraBold_Italic
AlbertSans_900Black_Italic

使用量

从您的 Expo 项目的根目录中的 shell 中运行此命令, 以便将字体家族包添加到您的工程中

npx expo install @expo-google-fonts/albert-sans expo-font

现在将这样的代码添加到您的工程中

import { Text, View } from "react-native";
import { useFonts } from '@expo-google-fonts/albert-sans/useFonts';
import { AlbertSans_100Thin } from '@expo-google-fonts/albert-sans/100Thin';
import { AlbertSans_200ExtraLight } from '@expo-google-fonts/albert-sans/200ExtraLight';
import { AlbertSans_300Light } from '@expo-google-fonts/albert-sans/300Light';
import { AlbertSans_400Regular } from '@expo-google-fonts/albert-sans/400Regular';
import { AlbertSans_500Medium } from '@expo-google-fonts/albert-sans/500Medium';
import { AlbertSans_600SemiBold } from '@expo-google-fonts/albert-sans/600SemiBold';
import { AlbertSans_700Bold } from '@expo-google-fonts/albert-sans/700Bold';
import { AlbertSans_800ExtraBold } from '@expo-google-fonts/albert-sans/800ExtraBold';
import { AlbertSans_900Black } from '@expo-google-fonts/albert-sans/900Black';
import { AlbertSans_100Thin_Italic } from '@expo-google-fonts/albert-sans/100Thin_Italic';
import { AlbertSans_200ExtraLight_Italic } from '@expo-google-fonts/albert-sans/200ExtraLight_Italic';
import { AlbertSans_300Light_Italic } from '@expo-google-fonts/albert-sans/300Light_Italic';
import { AlbertSans_400Regular_Italic } from '@expo-google-fonts/albert-sans/400Regular_Italic';
import { AlbertSans_500Medium_Italic } from '@expo-google-fonts/albert-sans/500Medium_Italic';
import { AlbertSans_600SemiBold_Italic } from '@expo-google-fonts/albert-sans/600SemiBold_Italic';
import { AlbertSans_700Bold_Italic } from '@expo-google-fonts/albert-sans/700Bold_Italic';
import { AlbertSans_800ExtraBold_Italic } from '@expo-google-fonts/albert-sans/800ExtraBold_Italic';
import { AlbertSans_900Black_Italic } from '@expo-google-fonts/albert-sans/900Black_Italic';

export default () => {

  let [fontsLoaded] = useFonts({
    AlbertSans_100Thin, 
    AlbertSans_200ExtraLight, 
    AlbertSans_300Light, 
    AlbertSans_400Regular, 
    AlbertSans_500Medium, 
    AlbertSans_600SemiBold, 
    AlbertSans_700Bold, 
    AlbertSans_800ExtraBold, 
    AlbertSans_900Black, 
    AlbertSans_100Thin_Italic, 
    AlbertSans_200ExtraLight_Italic, 
    AlbertSans_300Light_Italic, 
    AlbertSans_400Regular_Italic, 
    AlbertSans_500Medium_Italic, 
    AlbertSans_600SemiBold_Italic, 
    AlbertSans_700Bold_Italic, 
    AlbertSans_800ExtraBold_Italic, 
    AlbertSans_900Black_Italic
  });

  let fontSize = 24;
  let paddingVertical = 6;

  if (!fontsLoaded) {
    return null;
  } else {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_100Thin"
        }}>
          Albert Sans Thin
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_200ExtraLight"
        }}>
          Albert Sans Extra Light
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_300Light"
        }}>
          Albert Sans Light
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_400Regular"
        }}>
          Albert Sans Regular
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_500Medium"
        }}>
          Albert Sans Medium
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_600SemiBold"
        }}>
          Albert Sans Semi Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_700Bold"
        }}>
          Albert Sans Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_800ExtraBold"
        }}>
          Albert Sans Extra Bold
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_900Black"
        }}>
          Albert Sans Black
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_100Thin_Italic"
        }}>
          Albert Sans Thin Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_200ExtraLight_Italic"
        }}>
          Albert Sans Extra Light Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_300Light_Italic"
        }}>
          Albert Sans Light Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_400Regular_Italic"
        }}>
          Albert Sans Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_500Medium_Italic"
        }}>
          Albert Sans Medium Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_600SemiBold_Italic"
        }}>
          Albert Sans Semi Bold Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_700Bold_Italic"
        }}>
          Albert Sans Bold Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_800ExtraBold_Italic"
        }}>
          Albert Sans Extra Bold Italic
        </Text>
        <Text style={{
          fontSize,
          paddingVertical,
          // Note the quoting of the value for `fontFamily` here; it expects a string!
          fontFamily: "AlbertSans_900Black_Italic"
        }}>
          Albert Sans Black Italic
        </Text>
      </View>
    );
  }
};