react js 查看字体效果
起因， 目的:
想查看某个字体，对中英文的支持情况。
效果图:
完整项目见这里， 需要积分下载，不然的话，显得太水了。
过程:
- AI 对话， 生成代码。
- 我检查运行， 来回修改。
- 写个博客，记录过程。
核心代码 App.js
import React, { useState, useEffect, useCallback } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';
import Header from './components/Header';
import FontSelector from './components/FontSelector';
import TextDisplay from './components/TextDisplay';const fonts = [{ name: 'Arial' },{ name: 'Noto Sans' },{ name: 'SimSun' },{ name: 'Roboto' },{ name: 'Times New Roman' },{ name: 'Microsoft YaHei' },{ name: 'Consolas' },{ name: 'Open Sans' },{ name: 'Noto Sans SC' },{ name: 'Lora' },
];const defaultFont = 'Arial';function App() {const [selectedFont, setSelectedFont] = useState(defaultFont);const [englishFont, setEnglishFont] = useState(defaultFont);const [chineseFont, setChineseFont] = useState(defaultFont);const [searchTerm, setSearchTerm] = useState('');const checkFontSupport = async (fontName, text) => {try {const normalizedFontName = fontName.trim();if (['Arial', 'Microsoft YaHei', 'SimSun', 'Consolas', 'Times New Roman'].includes(normalizedFontName)) {if (normalizedFontName === 'Arial' || normalizedFontName === 'Consolas' || normalizedFontName === 'Times New Roman') {return text === 'A';}if (normalizedFontName === 'Microsoft YaHei') {return true;}if (normalizedFontName === 'SimSun') {return text === '中';}}await document.fonts.load(`20px "${normalizedFontName}"`);const isFontAvailable = document.fonts.check(`20px "${normalizedFontName}"`);if (!isFontAvailable) {console.log(`字体 ${normalizedFontName} 不可用`);return false;}return true;} catch (error) {console.error(`检测字体 ${fontName} 失败：`, error);return false;}};const handleFontChange = useCallback((fontName) => {const timer = setTimeout(async () => {setSelectedFont(fontName);const supportsEnglish = await checkFontSupport(fontName, 'A');const supportsChinese = await checkFontSupport(fontName, '中');const warnings = [];if (!supportsEnglish) {warnings.push('英文');setEnglishFont(defaultFont);} else {setEnglishFont(fontName);}if (!supportsChinese) {warnings.push('中文');setChineseFont(defaultFont);} else {setChineseFont(fontName);}if (warnings.length > 0) {toast.warn(`字体 ${fontName} 不支持${warnings.join('和')}，将使用默认字体 ${defaultFont}`);}}, 100);return () => clearTimeout(timer);}, []);useEffect(() => {const link = document.createElement('link');link.href ='https://fonts.font.im/css2?family=Noto+Sans&family=Roboto&family=Open+Sans&family=Noto+Sans+SC&family=Lora&display=swap';link.rel = 'stylesheet';document.head.appendChild(link);return () => document.head.removeChild(link);}, []);const filteredFonts = fonts.filter((font) =>font.name.toLowerCase().includes(searchTerm.toLowerCase()));return (<div className="App"><Header /><FontSelectorfonts={filteredFonts}selectedFont={selectedFont}onFontChange={handleFontChange}searchTerm={searchTerm}onSearchChange={setSearchTerm}/><TextDisplay englishFont={englishFont} chineseFont={chineseFont} /><ToastContainer /></div>);
}export default App;
过程简述
初始：4 种字体，静态检测，单行文本。
扩展：10 种字体，动态检测（checkFontSupport），添加搜索框、Google Fonts 链接、中英文各 3 行。
问题：
- 字体检测失败：改进 checkFontSupport，本地字体特殊处理。
- Google Fonts 加载：切换到 fonts.font.im。
- 重复警告：合并为单一警告。
运行：
npm install react-toastify
npm start
然后访问：http://localhost:3001
结论 + todo
- 大体效果还可以。
- 搜索框，还是有点问题。
相关文章：
react js 查看字体效果
起因， 目的: 想查看某个字体，对中英文的支持情况。 效果图: 完整项目见这里， 需要积分下载，不然的话，显得太水了。 过程: AI 对话， 生成代码。我检查运行， 来回修改。写个博客，…...
GZIPInputStream 类详解
GZIPInputStream 类详解 GZIPInputStream 是 Java 中用于解压缩 GZIP 格式数据的流类，属于 java.util.zip 包。它是 InflaterInputStream 的子类，专门处理 GZIP 压缩格式（.gz 文件）。 1. 核心功能 解压 GZIP 格式数据（RFC 1952 标准）自动处理 GZIP 头尾信息（校验和、时…...
数字智慧方案6206丨智慧园区大数据整体解决方案（45页PPT）（文末有下载方式）
资料解读：智慧园区大数据整体解决方案 详细资料请看本解读文章的最后内容。 在数字化快速发展的当下，智慧园区成为推动产业升级和城市发展的关键力量。这份智慧园区大数据整体解决方案，融合前沿技术与创新理念，为园区的高效管理、…...
Linux系统常用命令、标准C库函数和系统调用
目录 一、常用命令 env echo $name 键值 export name unset name gcc -c xxx.c ar 命令 ar -r libxxx.a xxx1.o xxx2.o gcc -c -fpic xxx.c gcc -shared -fpic xxx1.c xxx2.c -o libxxx.so kill [-信号] PID kill -l 软链接：ln -s xxx yyy 硬链接&…...
【Linux】基础指令（2）
man linux中有很多指令，我们不可能全部记住，man是linux/unix系统中的手册页指令，当我们遇到不熟悉的命令可以用man来查看命令，函数，配置文件的详细使用说明。 man手册分为多个章节，详情如下： …...
原理与使用细节)
“会话技术”——Cookie_(2/2)原理与使用细节
经过Cookie的快速入门与代码使用。如果想深入理解Cookie的技术实现，就得去理解它的原理。 且有些时候使用Cookie，还要根据需求设置存活期限以及确定Cookie获取范围等其他细节。最后，我们会总结Cookie这门客户端会话技术的作用。 一、原理 注…...
(命名管道))
Linux操作系统--进程间通信(中)(命名管道)
目录 1.命名管道： 1.1创建一个命名管道 1.2匿名管道与命名管道的区别 1.3命名管道的打开规则 1.4例子1-用命名管道实现文件拷贝 1.5例子2-用命名管道实现server&client通信 1.命名管道： 毫不相关的进程进行进程间通信管道应用的一个限制就是只能…...
数据结构6 · BinaryTree二叉树模板
代码函数功能顺序如下： 1：destroy：递归删除树 2：copy：复制二叉树 3：preOrder：递归前序遍历 4：inOrder：递归中序遍历 5：postOrder：递归后续遍…...
ubuntu的libc 库被我 sudo apt-get --reinstall install libc6搞没了
我系统的libc 没了 今天为了运行一个开源的yuv 播放器，在运行的时候提醒 Inconsistency detected by ld.so: dl-call-libc-early-init.c: 37: _dl_call_libc_early_init: Assertion sym ! NULL failed!然后听从AI 的建议 当我去执行ls 时，系统提示 就这…...
cat file.tar.gz | tar -xzf - -C /target/dir两个减号之间为什么有个空格？是写错了吗？（管道命令后续）
在 tar 命令的参数 -xzf - -C 中，两个减号（-）之间的空格是故意保留的语法，没有写错。具体原因如下： 1. -xzf - 的语法解析 -xzf 是 tar 命令的组合参数： x：表示解压（extract&#x…...
手机的数据楚门世界是如何推送的
手机推送，也叫茧影算法，手机的数据“楚门世界”：信息推送机制的深度剖析与社会影响 在数字化时代，手机已然成为人们生活中不可或缺的伴侣。当我们沉醉于手机带来的便捷与娱乐时，或许未曾察觉，自己正置身于…...
体系结构论文（八十二）：A Comprehensive Analysis of Transient Errors on Systolic Arrays
研究背景与动机 TPU架构（Tensor Processing Unit）广泛应用于DNN推理，其核心是脉动阵列，由大量的乘加单元（MAC）组成。 由于使用了纳米级CMOS技术，TPU对辐射引发的瞬态错误（SET&#…...
综合案例:使用vuex对购物车的商品数量和价格等公共数据进行状态管理
文章目录 0.实现需求1.新建购物车模块cart2.使用json-server模拟向后端请求数据3.在vuex请求获取并存入数据,并映射到组件中,在组件中渲染【重点】3.1.安装axios3.2.准备actions和mutations,获取和存入数据到vuex中3.3.动态渲染:用mapState映射 其他1.为什么在axios在项目中要局…...
二叉搜索树的判断（双指针解决）
98. 验证二叉搜索树 - 力扣（LeetCode） class Solution { public:TreeNode*preNULL;bool isValidBST(TreeNode* root) {if(rootNULL){return true;}bool leftisValidBST(root->left);if(pre!NULL&&pre->val>root->val){return fals…...
关于CSDN创作的常用模板内容
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 好文评论新文推送 📃文章前言 &…...
不小心误删了文件，找Windows数据恢复工具来帮忙
相信很多人都遇到过这样的情况：不小心在电脑上删除了一些重要的文件，等到想要找回来时，却感觉特别棘手。 今天我要给大家推荐一款超棒的Windows数据恢复工具，它能轻松帮你找回那些被误删的文件。 （文末附下载链接&…...
[Verilog]跨时钟域数据传输解决方案
跨时钟域数据传输解决方案 摘要：跨时钟域数据传输 (Clock Domain Crossing, CDC) 是 SoC 设计中常见且关键的问题，因为现代 SoC 通常包含多个时钟域，不同模块可能运行在不同频率或相位的时钟下。跨时钟域传输数据时，如果处理不当，可能会导致亚稳态 (Metastability)…...
Linux——进程终止/等待/替换
前言 本章主要对进程终止，进程等待，进程替换的详细认识，根据实验去理解其中的原理，干货满满！ 1.进程终止 概念：进程终止就是释放进程申请的内核数据结构和对应的代码和数据 进程退出的三种状态 代码运行…...
数据结构与算法：图论——最短路径
最短路径 先给出一些leetcode算法题，以后遇见了相关题目再往上增加 最短路径的4个常用算法是Floyd、Bellman-Ford、SPFA、Dijkstra。不同应用场景下，应有选择地使用它们： 图的规模小，用Floyd。若边的权值有负数，需要…...
双指针（5）——有效三角形个数
题目： 这道题我们首先可能会想到暴力解法，三个for循环然后进行check（）。时间复杂度肯定是不允许的。 同时，验证可以组成三角形的条件是任意两边之和大于第三边，这就意味着我们每组要进行三次比较。但也有捷…...
Qt QGraphicsScene 的用法
背景，为什么要写这篇博客 今天学习 model - view 模式的时候还看到有 scene - view 模式。不知道还有这个模式，所以学习了下。 学习后总体的感觉是：其实没有也是可以的，但有了方便许多。 从两种画图的方法开始说 以前有个项目也…...
使用 Tesseract 实现藏文OCR
要识别藏文，最常用且有效的方法是使用Tesseract OCR（谷歌开源的OCR工具），因为它拥有针对藏文的预训练模型支持。 🚀 一、安装 Tesseract OCR 软件： 下载链接：Tesseract OCR 下载页面 Windows用…...
数字智慧方案5873丨智慧交通设计方案（57页PPT）（文末有下载方式）
资料解读：智慧交通设计方案 详细资料请看本解读文章的最后内容。 智慧交通设计方案是一份详尽的交通规划文件，旨在通过科学的交通设计方法，优化交通系统，提升交通效率，确保交通安全，并促进可持续发展。该…...
【quantity】6 温度单位实现（temperature.rs）
一源码 以下代码实现了一个温度单位系统，支持开尔文(Kelvin)和摄氏度(Celsius)之间的转换和运算。 /// Temperature (kelvin) / 温度 (开尔文) use super::{Quantity, prefix::*}; use crate::unit::Kelvin; use derive_more::{Add, Sub, AddAssign, SubAssign};/…...
ARConv的复现流程
使用环境 Python 3.10.16 torch 2.1.1cu118 torchvision 0.16.1cu118 其它按照官方提供代码的requirements.txt安装 GitHub - WangXueyang-uestc/ARConv: Official repo for Adaptive Rectangular Convolution 数据准备 从官方主页下载pancollection数据集PanCollection…...
安卓游戏APK文件解密与编辑的完整攻略
在移动游戏开发中，保护游戏数据不被篡改是开发者的重要任务。然而，随着逆向工程技术的发展，破解游戏数据也变得可能。本文将详细介绍如何分析、解密和编辑APK安装包中的加密JSON文件，特别关注assets/task目录下的文件，并提供一种绕过checkfile.json中MD5校验的有效方法。通…...
JVM——JVM 是如何执行方法调用的？
JVM 是如何执行方法调用的？ 在 Java 世界的底层运作中，方法调用机制是理解 Java 虚拟机（JVM）行为的关键之一。JVM 作为 Java 程序运行的核心，承担着执行字节码、管理内存、调度线程等多项职责。而方法调用作为程序逻辑…...
一天学完JDBC！！（万字总结）
文章目录 JDBC是什么 1、环境搭建 && 入门案例2、核心API理解①、注册驱动(Driver类)②、Connection③、statement(sql注入)④、PreparedStatement⑤、ResultSet 3、jdbc扩展(ORM、批量操作)①、实体类和ORM②、批量操作 4. 连接池①、常用连接池②、Durid连接池③、Hi…...
【愚公系列】《Manus极简入门》011-习惯养成教练：“习惯塑造师”
🌟【技术大咖愚公搬代码：全栈专家的成长之路，你关注的宝藏博主在这里！】🌟 📣开发者圈持续输出高质量干货的"愚公精神"践行者——全网百万开发者都在追更的顶级技术博主！ …...
精益数据分析（38/126）：SaaS模式的流失率计算优化与定价策略案例
精益数据分析（38/126）：SaaS模式的流失率计算优化与定价策略案例 在创业和数据分析的领域中，我们不断探索如何更精准地把握业务发展的关键要素。今天，带着与大家共同进步的想法，深入研读《精益数据分析》&a…...
50.【必备】二分答案法与相关题目
本文的网课内容学习自B站左程云老师的算法详解课程，旨在对其中的知识进行整理和分享~ 网课链接：算法讲解051【必备】二分答案法与相关题目_哔哩哔哩_bilibili 一.爱吃香蕉的珂珂 题目：爱吃香蕉的珂珂 算法原理 整体思路 这是一个二分查找算法…...
)
C# 方法(局部变量和局部常量)
本章内容: 方法的结构 方法体内部的代码执行 局部变量 局部常量 控制流 方法调用 返回值 返回语句和void方法 局部函数 参数 值参数 引用参数 引用类型作为值参数和引用参数 输出参数 参数数组 参数类型总结 方法重载 命名参数 可选参数 栈帧 递归 局部变量 和第5章介绍的字段…...
MQTT 协议与 HTTP 协议的区别
在现代的网络通信中，MQTT 协议和 HTTP 协议都扮演着重要的角色，但它们有着不同的特点和适用场景。下面我们就从多个方面来详细探讨它们之间的区别。 一.协议设计理念 1. MQTT 协议 MQTT（Message Queuing Telemetry Transport）即…...
博弈论思维——AI与思维模型【90】
一、定义 博弈论思维模型是一种研究在相互影响的决策情境中，参与者如何通过策略选择来实现自身利益最大化的理论框架。它分析参与者之间的相互作用、策略组合以及由此产生的结果，帮助人们理解在竞争或合作环境下的决策逻辑和行为模式。 二、由来 博弈…...
【Bootstrap V4系列】学习入门教程之 表格（Tables）和画像（Figure）
Bootstrap V4系列 学习入门教程之 表格（Tables）和画像（Figure） 表格（Tables）一、Examples二、Table head options 表格头选项三、Striped rows 条纹行四、Bordered table 带边框的表格五、Borderless table…...
 的概念与优势)
第 3 篇：有序的世界：有序表 (TreeMap/TreeSet) 的概念与优势
上一篇我们探讨了哈希表如何以牺牲顺序为代价换取极致的平均速度。然而，在现实世界的许多应用中，数据的有序性不仅是锦上添花，甚至是核心需求。想象一下： 你需要显示一个按价格排序的商品列表。你需要找到某个时间点之前或之后的…...
VulnHub-DC-2靶机
主机发现 sudo arp-scan -l 以sudo管理员权限扫描本地活动ip地址 Interface: eth0, type: EN10MB, MAC: 08:00:27:22:46:4f, IPv4: 192.168.252.230 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.252.6 4c:5f:70:74:3c:3b …...
论文笔记（八十三）STACKGEN: Generating Stable Structures from Silhouettes via Diffusion
STACKGEN: Generating Stable Structures from Silhouettes via Diffusion 文章概括摘要I. INTRODUCTIONII. 相关工作A. 从直觉物理学学习稳定性B. 用于姿态生成的扩散模型C. 自动化顺序装配 III. 方法A. 用于 S E ( 3 ) SE(3) SE(3)积木姿态生成的扩散模型B. 模型架构C. 数据生…...
论文阅读笔记——TesserAct: Learning 4D Embodied World Models
TesserAct 论文 采用RGB-DN（RGB深度法线） 作为 4D 场景中间表示，由此建模 4D 场景，比纯 2D 视频更准确地建模 3D 几何结构。相比现有的 4D 视频生成，优化速度快，收敛好，且首次从当前帧和文本描述…...
变转速振动信号分析处理与故障诊断算法模块
变转速振动信号分析处理与故障诊断算法模块，作为信号处理算法工具箱的主要功能模块，形成了以变转速振动信号分析处理与故障诊断算法模块的经典算法模型，可应用于各类关键机械部件（轴承、齿轮、转子等）的信号分析、故障…...
每日算法-250502
每日算法 - 2025.05.02 记录一下今天刷的几道 LeetCode 算法题。 3191. 使二进制数组全部等于 1 的最少操作次数 I 题目 思路 贪心 解题过程 遍历数组 nums。当我们遇到 nums[i] 时： 如果 nums[i] 是 1，我们不需要进行操作，因为目标是全 …...
如何在纯C中实现类、继承和多态（小白友好版）
基本实现原理 /* 通过结构体函数指针模拟类 */ typedef struct {// 成员变量int x; // 成员方法（函数指针） void (*print)(void* self); } MyClass;/* 成员函数实现 */ void my_print(void* self) {MyClass* obj (MyClass*)self;p…...
AE/PR插件 转场创建大师专业版 Transition Master Pro v2.0.2 Win+使用教程
Transition Master Pro v2.0.2是一款原生转场插件，专为Adobe Premiere Pro和After Effects设计。它提供了创建、导出和销售自己的转场效果，或从一个庞大的转场预设库中选择。使用Transition Master Pro v2.0.2，您可以快速轻松地创建令人惊叹的…...
[Linux]从零开始的STM32MP157 Buildroot根文件系统构建
一、前言 在前面的教程中，教了大家如何移植一个LInux的内核并且正确启动，我们发现Linux内核在启动后会出现一个错误，提示我们没有找到根文件系统。那么什么是根文件系统呢？之前我们使用Ubuntu编译了STM32MP157的TF-A,UBOOT,LINUX内…...
阿里云服务器 篇五（加更）：短链服务网站：添加反垃圾邮件功能
文章目录 系列文章（可选）更新YOURLS版本安装 Compliance 插件安装 Phishtank-2.0 插件（可选）安装 httpBL 插件样例网站（不推荐）使用谷歌解决方案更多系列文章 阿里云服务器 篇一：申请和初始化 阿里云服务器 篇二：搭建静态网站 阿里云服务器 篇三：提交搜索引擎收录 阿…...
状压 DP 详解
文章目录 简介做法洛谷 P1171 简介 状压 DP 其实约等于一个 DP 的小技巧，一般应用在处理一个或多个集合的问题中（因为状压 DP 的下标就是一个集合），而且在 n n n 太大的时候建议不要使用这种方法。（如果你不懂&#…...
)
多模态大模型轻量化探索-视觉大模型SAM(Segment Anything Model)
往期，笔者基于LLava的数据对齐训练，搞了一个Reyes多模态大模型，并且看了些多模态大模型，相关开源的多模态大模型如：KimiVL、Internvl、QwenVL等，其视觉编码器的尺寸都比较大，如：Moon…...
数据分析_问题/优化
1 报表开发 1.1 数据问题 (1) 数据易错 问题描述 ①数据整合困难:数据来源多样、格式差异大,整合时处理不当易丢错数据. ②计算逻辑复杂:开发人员对复杂计算逻辑的理解产生偏差,会导致计算结果不准. 解决方案 ①建立数据标准,统一修正字段命名、数据类型、日期格式等 ②加强…...
我的stm32驱动电机驱动着突然就卡死程序死机了是为什么
电源不稳定或干扰 电机启动电流冲击：电机运行时可能导致电源电压跌落，影响STM32稳定性。需检查电源滤波电容、使用独立电源或增加稳压模块 地线干扰：电机与MCU共地时，高频噪声可能通过地线耦合，需采用隔离电路或磁耦芯…...
使用 Java 实现一个简单且高效的任务调度框架
目录 一、任务调度系统概述 （一）任务调度的目标 （二）任务调度框架的关键组成 二、任务状态设计 （一）任务状态流转设计 （二）任务表设计（SQL） 三、单机任…...