快速实现简体繁体中文切换

MaxLoongLvs

于 2024-02-21 15:16:16 发布

阅读量609

点赞数 9

文章标签： reactjs css 前端 javascript vue

本文链接：https://blog.csdn.net/shadowfall/article/details/136212212

版权

简体繁体中文切换

通过css，引入字体包，将font-family设置为繁体，这样不仅方便快捷，性能也比i18n和js实现好多了。注意我们一定要找免费商用的字体包，繁体比较出名的字体包就是苹方。下载好之后放在public文件夹下，用@font-face引入使用

index.less

@font-face {
	font-family: 'PingFang SC';
	src: url('./public/PingFang.ttf');
}

.root-font {
  font-family: 'PingFang SC';
}

appolo配置参数控制简体和繁体切换, 在index.html下增加脚本判断是否需要在body上增加root-font类名显示繁体中文

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Index</title>
        <link rel="icon" href="/frontend/Title-logo.png" type="image/x-icon" />
    </head>

    <body>
        <input style="opacity: 0; position:absolute; width: 0; height: 0 " />
        <input type="password" style="opacity: 0; position:absolute; width: 0; height: 0 " />
        <div id="root"></div>
        <!-- <script src="./static/js/jquery.min.js"></script> -->
    </body>
    <script>
        var result = {}; // 创建空对象存放结果
        window
            .fetch('https://xxxx.com?key=zh.font', {
                method: 'GET',
                cache: 'no-cache'
            })
            .then(function(response) {
                return response.json(); // 将响应转换为 JSON 格式
            })
            .then(function(data) {
                if (data?.data === 'traditional') {
                    const element = document.querySelector('body');
                    element.classList.add('root-font');
                }
            });
    </script>
</html>

注: 如果项目内部自定义过字体, 需要手动重新覆盖字体

MaxLoongLvs

关注

9
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
快速实现简体繁体中文切换

通过css，引入字体包，将font-family设置为繁体，这样不仅方便快捷，性能也比i18n和js实现好多了。注意我们一定要找免费商用的字体包，繁体比较出名的字体包就是苹方。下载好之后放在public文件夹下，用@font-face引入使用。appolo配置参数控制简体和繁体切换, 在index.html下增加脚本判断是否需要在body上增加root-font类名显示繁体中文。// 将响应转换为 JSON 格式。// 创建空对象存放结果。
复制链接

扫一扫