zoukankan      html  css  js  c++  java
  • [技巧] 同一段文本中,英文和汉字调用不同class样式

      [技巧] <wbr>同一段文本中,英文和汉字调用不同class样式

    感谢东鳞西爪、SevencityHomelinkLeXRus

    需求:要求所有文本中,汉字使用微软雅黑,阿拉伯数字和英语使用Arial。(文本中有好多的编号数字和部分英语)

    解决方式有两个,css方法和js方法。
    一、css方法
    先定义一个英文字体再定义中文字体,这是因为英文字体中一般不含有中文,执行的时候英文和阿拉伯数字选用“Arial”,中文的字体使用第二个字体微软雅黑。比如,可以这样来定义WordPress中的中英文字体:

    body{

        font-family: Arial,"微软雅黑";

    }

    *需要注意的是,这样的做法对符合网页规范的浏览器比如Firefox虽然有效,但对IE6IE7会导致中文字体设定无效,也就是说,这样的办法对于微软的IE系列来说等于不设置中文字体,而只是采用系统默认的宋体来显示网页内容。

    也可以指定两个class分别分配给中文和英文内容,这样就可以对IE也实现如上的字体效果,并可以为中英文的显示进行更详细的定制(比如字号等属性),但缺点是这样的做法比较繁杂,使用上不太方便,特别是对博客这样的中英文混编的文章内容来说更是麻烦。

    二、使用js实现

    当然也能用JavaScript+Css来实现这个效果,实现方式可以参考经典论坛上的相关帖子:

     

      1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2. <html xmlns="http://www.w3.org/1999/xhtml">
      3. <head>
      4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5. <title>无标题文档</title>
      6. </head>
      7. <style>
      8. .cn{font-size:12px;font-family:宋体;}
      9. body{font-family:"Comic Sans MS";}
      10. </style>
      11. <script >
      12. function xsize(xstr){return xstr.replace(/([\u0391-\uFFE5]+)/ig,"<font class=\"cn\">$1<\/font>");}
      13. </script>
      14. <body onload="bb.innerHTML=xsize(bb.innerHTML)" id="bb">
      15. --hello~ 曾经某国留学生到米国旅游,遇到某事故,然后翻车在里面等待救援。<br/>
      16. --米国某人看到问其:"how are you?"<br />
      17. --某国留学生说:"oh~ i'm fine?and you?"~<br />
      18. --米国某人说:"oh~fine too"然后走了<br />
      19. </body>
      20. </html>
  • 相关阅读:
    Pytorch-情感分类实战(基于LSTM,调用torchtext)
    Pytorch-LSTM
    Pytorch-时间序列预测
    Pytorch-RNN
    SQLServer -------- 包含(charindex)
    .NET ------ 树形菜单,点击单选按钮触发相应事件
    电子秤Xk3190-A12+E 称重方式的设置方法
    串口调试工具与com口编程
    .NET ------ Repeater 遍历数据显示在页面上
    .NET ------ 将弹窗内增加选项卡
  • 原文地址:https://www.cnblogs.com/liuu/p/2992801.html
Copyright © 2011-2022 走看看