react实现字体选择
实现字体选择功能
在React中实现字体选择功能可以通过结合下拉菜单（<select>）或自定义UI组件与状态管理完成。以下是具体实现方法：
使用原生下拉菜单
创建一个下拉菜单组件，绑定字体列表和状态管理：
import React, { useState } from 'react';
const FontSelector = () => {
const [selectedFont, setSelectedFont] = useState('Arial');
const fonts = ['Arial', 'Times New Roman', 'Courier New', 'Verdana', 'Georgia'];
const handleFontChange = (e) => {
setSelectedFont(e.target.value);
};
return (
<div style={{ fontFamily: selectedFont }}>
<select value={selectedFont} onChange={handleFontChange}>
{fonts.map((font) => (
<option key={font} value={font}>
{font}
</option>
))}
</select>
<p>预览文本：这段文字会显示当前选中的字体效果。</p>
</div>
);
};
export default FontSelector;自定义UI组件（如按钮列表）
通过按钮或卡片实现更灵活的字体选择界面：
import React, { useState } from 'react';
const CustomFontSelector = () => {
const [activeFont, setActiveFont] = useState('Arial');
const fontOptions = [
{ name: 'Arial', displayName: 'Arial' },
{ name: 'Times New Roman', displayName: 'Times New Roman' },
{ name: 'Courier New', displayName: 'Courier New' },
];
return (
<div style={{ fontFamily: activeFont }}>
<div className="font-buttons">
{fontOptions.map((font) => (
<button
key={font.name}
onClick={() => setActiveFont(font.name)}
style={{
fontFamily: font.name,
backgroundColor: activeFont === font.name ? '#ddd' : '#fff',
}}
>
{font.displayName}
</button>
))}
</div>
<p>预览文本：自定义字体选择器示例。</p>
</div>
);
};
export default CustomFontSelector;动态加载Google Fonts
若需要使用Google Fonts，需在public/index.html中添加链接：
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Open+Sans&display=swap" rel="stylesheet">组件中直接引用字体名称：
const googleFonts = ['Roboto', 'Open Sans'];全局字体切换
通过Context API实现全局字体设置：
import React, { createContext, useContext, useState } from 'react';
const FontContext = createContext();
export const FontProvider = ({ children }) => {
const [font, setFont] = useState('Arial');
return (
<FontContext.Provider value={{ font, setFont }}>
<div style={{ fontFamily: font }}>{children}</div>
</FontContext.Provider>
);
};
export const useFont = () => useContext(FontContext);在子组件中调用：
const ChildComponent = () => {
const { font, setFont } = useFont();
return <button onClick={() => setFont('Roboto')}>切换为Roboto</button>;
};注意事项
- 字体可用性：确保所选字体在用户设备或通过CDN（如Google Fonts）可用。
- 性能优化：避免加载过多字体文件，影响页面加载速度。
- 无障碍：为下拉菜单添加
aria-label，确保屏幕阅读器可识别。
以上方法可根据实际需求组合使用，例如结合Context API与自定义UI组件实现企业级应用的字体系统。
