129 lines
5.0 KiB
TypeScript
129 lines
5.0 KiB
TypeScript
/**
|
||
* 字体测试页面
|
||
* @author 阿瑞
|
||
* @description 用于测试Geist字体是否正常加载和显示的页面
|
||
* @version 1.1.0
|
||
* @created 2024-12-19
|
||
* @updated 修复SSR错误，安全获取字体信息
|
||
*/
|
||
|
||
import React, { useState, useEffect } from 'react';
|
||
import { Typography, Card, Button, Input, Select } from 'antd';
|
||
|
||
const { Title, Paragraph, Text } = Typography;
|
||
|
||
// 模块级注释：字体测试组件
|
||
const FontTestPage: React.FC = () => {
|
||
// 关键代码行注释：状态管理，用于安全获取字体信息
|
||
const [fontFamily, setFontFamily] = useState<string>('加载中...');
|
||
const [isMounted, setIsMounted] = useState<boolean>(false);
|
||
|
||
// 关键代码行注释：客户端挂载后获取字体信息
|
||
useEffect(() => {
|
||
setIsMounted(true);
|
||
if (typeof window !== 'undefined') {
|
||
const bodyFontFamily = getComputedStyle(document.body).fontFamily;
|
||
setFontFamily(bodyFontFamily);
|
||
}
|
||
}, []);
|
||
|
||
return (
|
||
<div style={{ padding: '24px', maxWidth: '800px', margin: '0 auto' }}>
|
||
<Card className="glass-card">
|
||
<Title level={1}>Geist 字体测试页面SaasS</Title>
|
||
|
||
<Paragraph>
|
||
这是一个测试页面，用于验证 Geist 字体是否正常加载。如果您看到的是 Geist 字体，
|
||
文本应该看起来更加清晰和现代。
|
||
</Paragraph>
|
||
|
||
{/* 关键代码行注释：不同字重的字体测试 */}
|
||
<Title level={2}>字体权重测试</Title>
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<Text style={{ fontWeight: 300, fontSize: '16px', display: 'block', marginBottom: '8px' }}>
|
||
Geist Light (300): 这是轻字重文本
|
||
</Text>
|
||
<Text style={{ fontWeight: 400, fontSize: '16px', display: 'block', marginBottom: '8px' }}>
|
||
Geist Regular (400): 这是常规字重文本
|
||
</Text>
|
||
<Text style={{ fontWeight: 500, fontSize: '16px', display: 'block', marginBottom: '8px' }}>
|
||
Geist Medium (500): 这是中等字重文本
|
||
</Text>
|
||
<Text style={{ fontWeight: 600, fontSize: '16px', display: 'block', marginBottom: '8px' }}>
|
||
Geist SemiBold (600): 这是半粗体文本
|
||
</Text>
|
||
<Text style={{ fontWeight: 700, fontSize: '16px', display: 'block', marginBottom: '8px' }}>
|
||
Geist Bold (700): 这是粗体文本
|
||
</Text>
|
||
<Text style={{ fontWeight: 800, fontSize: '16px', display: 'block', marginBottom: '8px' }}>
|
||
Geist ExtraBold (800): 这是超粗体文本
|
||
</Text>
|
||
</div>
|
||
|
||
{/* 关键代码行注释：组件字体测试 */}
|
||
<Title level={2}>组件字体测试</Title>
|
||
<div style={{ marginBottom: '16px' }}>
|
||
<Button type="primary" style={{ marginRight: '8px', marginBottom: '8px' }}>
|
||
Geist 按钮
|
||
</Button>
|
||
<Input
|
||
placeholder="Geist 输入框"
|
||
style={{ marginBottom: '8px', maxWidth: '200px' }}
|
||
/>
|
||
<Select
|
||
placeholder="Geist 选择框"
|
||
style={{ width: '200px', marginBottom: '8px' }}
|
||
options={[
|
||
{ value: '1', label: 'Geist 选项 1' },
|
||
{ value: '2', label: 'Geist 选项 2' },
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
{/* 关键代码行注释：英文字体测试 */}
|
||
<Title level={2}>English Font Test</Title>
|
||
<Paragraph>
|
||
This is a paragraph to test the Geist font with English text.
|
||
Geist is a modern, clean typeface designed for digital interfaces.
|
||
It should look crisp and readable across different sizes and weights.
|
||
</Paragraph>
|
||
|
||
{/* 关键代码行注释：字体信息显示 */}
|
||
<Title level={2}>字体信息</Title>
|
||
<Paragraph>
|
||
<Text code>font-family: {fontFamily}</Text>
|
||
</Paragraph>
|
||
|
||
<div style={{
|
||
padding: '16px',
|
||
background: 'rgba(0,0,0,0.05)',
|
||
borderRadius: '8px',
|
||
fontFamily: 'monospace'
|
||
}}>
|
||
<strong>检查方法：</strong><br />
|
||
1. 打开浏览器开发者工具 (F12)<br />
|
||
2. 选择元素检查器<br />
|
||
3. 查看 computed styles 中的 font-family<br />
|
||
4. 应该显示 "Geist" 作为第一个字体
|
||
</div>
|
||
|
||
{/* 关键代码行注释：实时字体检测结果 */}
|
||
{isMounted && (
|
||
<div style={{
|
||
marginTop: '16px',
|
||
padding: '16px',
|
||
background: fontFamily.includes('Geist') ? 'rgba(0, 255, 0, 0.1)' : 'rgba(255, 165, 0, 0.1)',
|
||
borderRadius: '8px',
|
||
border: `2px solid ${fontFamily.includes('Geist') ? '#06d7b2' : '#ff9640'}`
|
||
}}>
|
||
<strong style={{ color: fontFamily.includes('Geist') ? '#06d7b2' : '#ff9640' }}>
|
||
{fontFamily.includes('Geist') ? '✅ Geist 字体已成功加载！' : '⚠️ Geist 字体未加载，正在使用fallback字体'}
|
||
</strong>
|
||
</div>
|
||
)}
|
||
</Card>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default FontTestPage;
|