所以我按照有关如何在 Tamagui 中加载字体的文档进行操作：配置 我能够在博览会上加载我的字体。
apps/expo/app/_layout.tsx：
// ...
import { Glegoo_400Regular, Glegoo_700Bold } from '@expo-google-fonts/glegoo'
import {
OpenSans_400Regular,
OpenSans_600SemiBold,
OpenSans_700Bold,
} from '@expo-google-fonts/open-sans'
import { Nunito_400Regular, Nunito_700Bold } from '@expo-google-fonts/nunito'
export const unstable_settings = {
// Ensure that reloading on `/user` keeps a back button present.
initialRouteName: 'Home',
}
// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync()
export default function App() {
const [interLoaded, interError] = useFonts({
Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
Glegoo: Glegoo_400Regular,
GlegooBold: Glegoo_700Bold,
OpenSans: OpenSans_400Regular,
OpenSansSemiBold: OpenSans_600SemiBold,
OpenSansBold: OpenSans_700Bold,
Nunito: Nunito_400Regular,
NunitoBold: Nunito_700Bold,
})
useEffect(() => {
if (interLoaded || interError) {
// Hide the splash screen after the fonts have loaded (or an error was returned) and the UI is ready.
SplashScreen.hideAsync()
}
}, [interLoaded, interError])
if (!interLoaded && !interError) {
return null
}
return <RootLayoutNav />
}
// ...
}
我在 Tamagui 配置中使用 Open Sans 作为字体主体，这些更改反映在本机上，但没有反映在 Web 上。
packages/config/src/tamagui.config.ts:
// ...
// Expo Google Fonts for branding.
const glegooFont = createFont({
family: 'Glegoo',
size: {
1: 12,
2: 14,
3: 16,
4: 18,
5: 20,
6: 22,
},
weight: {
3: '700',
},
face: {
700: { normal: 'GlegooBold' },
},
})
const openSansFont = createFont({
family: 'OpenSans',
size: {
1: 12,
2: 14,
3: 16,
4: 18,
5: 20,
6: 22,
},
weight: {
2: '600',
3: '700',
},
face: {
600: { normal: 'OpenSansSemiBold' },
700: { normal: 'OpenSansBold' },
},
})
const nunitoFont = createFont({
family: 'Nunito',
size: {
1: 12,
2: 14,
3: 16,
4: 18,
5: 20,
6: 22,
},
weight: {
3: '700',
},
face: {
700: { normal: 'NunitoBold' },
},
})
// ...
export const config = createTamagui({
defaultFont: 'body',
animations,
shouldAddPrefersColorThemes: true,
themeClassNameOnRoot: true,
// ...
// I used Open Sans for body
fonts: {
body: openSansFont,
heading: headingFont,
},
// ...
我加载的字体没有显示在网络上，因为我还没有在 mono 存储库的 next.js 部分成功加载它们，但我想知道加载它们的最合适的方法是什么，如文档所示： 配置还没有真正详细说明我应该如何做。
我根据文档尝试了此操作，但它仍然没有应用网络中 tamagui.config.ts 中的字体配置。 我还尝试使用 next/google/font 方法来加载字体，但我仍然无法使其工作。我应该采取哪些额外步骤来确保我的字体加载到 Next.js 中？
应用程序/下一页/页面/_app.tsx：
function MyApp({ Component, pageProps }: SolitoAppProps) {
return (
<>
<Head>
<title>Tamagui • Pages Router</title>
<meta
name="description"
content="Tamagui, Solito, Expo & Next.js"
/>
<link
rel="icon"
href="/favicon.ico"
/>
{/* I tried loading fonts like this in Next.js */}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link
href="https://fonts.googleapis.com/css2?family=Glegoo:wght@400;700&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet"
/>
<script
dangerouslySetInnerHTML={{
// avoid flash of animated things on enter:
__html: `document.documentElement.classList.add('t_unmounted')`,
}}
/>
</Head>
<ThemeProvider>
<Component {...pageProps} />
</ThemeProvider>
</>
)
}
我终于能够通过执行以下步骤修复它：
apps/next/pages/* apps/next/pages/_app.styles.css */
@import url('https://fonts.googleapis.com/css2?family=Glegoo:wght@400;700&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
// apps/next/pages/_app.tsx
import '@tamagui/core/reset.css'
import '@tamagui/font-inter/css/400.css'
import '@tamagui/font-inter/css/700.css'
// import it here
import './_app.styles.css'
import 'raf/polyfill'
// ...
function MyApp({ Component, pageProps }: SolitoAppProps) {
return (
<>
<Head>
<title>Tamagui • Pages Router</title>
// Define loaded fonts using createFont
const glegooFont = createFont({
family: 'Glegoo, serif',
size: {
1: 12,
2: 14,
3: 16,
4: 18,
5: 20,
6: 22,
},
weight: {
1: '400',
3: '700',
},
// for native only, alternate family based on weight/style
// make sure to match the family names to the ones imported in expo
face: {
400: { normal: 'Glegoo' },
700: { normal: 'GlegooBold' },
},
})
const openSansFont = createFont({
// this ensures that the family name format matches the one
// declared in expo to prevent warnings when running in native
family: isWeb ? 'Open Sans, serif' : 'OpenSans',
size: {
1: 12,
2: 14,
3: 16,
4: 18,
5: 20,
6: 22,
},
weight: {
1: '400',
2: '600',
3: '700',
},
// for native only, alternate family based on weight/style
// make sure to match the family names to the ones imported in expo
face: {
400: { normal: 'OpenSans' },
600: { normal: 'OpenSansSemiBold' },
700: { normal: 'OpenSansBold' },
},
})
// ...
export const config = createTamagui({
defaultFont: 'body',
animations,
// ...
fonts: {
// used Open Sans as the default body font for branding
// you could revert to using Tamagui's sample with bodyFont.
body: openSansFont,
heading: headingFont,
glegoo: glegooFont,
openSans: openSansFont,
nunito: nunitoFont,
},
请注意我如何使用
isWeb