美文网首页
vue项目国际化后各个语种样式不同解决方法

vue项目国际化后各个语种样式不同解决方法

作者: 阿凯_8b27 | 来源:发表于2020-08-12 10:33 被阅读0次

在设置界面国际化语种的同时,在html设置lang属性

document.getElementsByTagName('html')[0].setAttribute('lang', content);

根据lang进行样式的区分

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[lang]:lang(en),
:lang(en) body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[lang]:lang(zh),
:lang(zh) body {
  font-family: "Microsoft YaHei", sans-serif;
}

具体的class也可以采用

    .tab {
        height: 100%;
        padding: 0 4px;
        margin-right: 5px;
        line-height: 27px;
        font-size: 14px;
        font-weight: 400;
        font-family: Microsoft YaHei;
        color: #4a4e59;
        &:hover {
            font-weight: bold;
            cursor: pointer;
            border-bottom: 3px solid;
        }
    }
    .tab:lang(en){
        max-width: 142px;
        white-space: nowrap;
    }

相关文章

网友评论

      本文标题:vue项目国际化后各个语种样式不同解决方法

      本文链接:https://www.haomeiwen.com/subject/aufmhktx.html