办法:多语言版本Web系统中对应多种字体(Font Family)。

本文详细阐述了一种简化跨语言界面字体切换的方法,通过创建并动态加载不同语言风格的CSS文件来实现在中文和MS Gothic字体之间的无缝转换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

呆成都这半年下来,发现这边用户的需求真的是取之不竭。

为了不耽误日程,俺们必然要竭尽所能。

这次用户提出:切换至外文时 使用 MS Gothic 字体。

 

解析一下:

中文界面 ---> 默认字体

外文界面 ---> MS Gothic

 

一些背景:

双语是用DOTNET的资源文件解决的。

90%的页面有使用母版页。

项目组每个人都很疲惫,这次我只求快速简便够用。

区分CultureInfo中的语种[Culture_LanguageKey]保存在Session中

 

办法思路:

1、清除所有CSS文件中的 字体 属性。

2、写俩全局CSS文件,一个为默认的中文式样,一个是外文的式样。

3、在母版页用JS根据语种选择加载CSS文件。

 

石马:

 

中文CSS文件:fontFamilyStyle_CN.css

 

*{    font-family:新宋体;}///想要的默认字体

 

外文CSS文件:fontFamilyStyle_FN.css

*{    font-family:MS Gothic;}


MasterPage.Page

    <script type="text/javascript">     
        ///根据语言初始化Font Family 强兼容性
        function initFontFamily() {
            var language = '<%=Session["Culture_LanguageKey"]%>';///脚本获取Session变量
            var cssFileName;

            ///根据语言设置css文件路径

            ///FN:外文 --  CN:中文

            if (language == "FN") {
                cssFileName = "../CSS/fontFamilyStyle_FN.css";
            } else {
                cssFileName = "../CSS/fontFamilyStyle_CN.css";
            }       
            if (document.createStyleSheet) {//IE浏览器插入样式文件
                document.createStyleSheet(cssFileName, 1);
            }
            else { //其他浏览器插入样式文件

                var css_link = document.createElement("link");
                css_link.setAttribute("type", "text/css");
                css_link.setAttribute("rel", "stylesheet");
                css_link.setAttribute("href", cssFileName);
                document.getElementsByTagName("head")[0].appendChild(css_link);
            }
        }

 

        ///随意调用下就OK,无需指定到body的onload

        initFontFamily();
    </script>

 

 结束。

 简单测试了下,没有问题。

 没有更多要说的了。

 

 

 

 

 

 

转载于:https://www.cnblogs.com/leichi/archive/2012/06/12/2546458.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值