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>
  • 相关阅读:
    Android 8.0 adb shell dumpsys activity activities | findstr mFocusedActivity 获取当前的 activity 显示空的
    spring-in-action_day01
    spring-in-action_day02
    spring-in-action-day04-配置属性 @ConfigurationProperties
    springmvc接收参数
    spring中Utils工具类注入问题
    Eclipse Push出现rejected
    Eclpis-cannot open git-receive-pack
    IO
    LinkedHashmap简要说明
  • 原文地址:https://www.cnblogs.com/liuu/p/2992801.html
Copyright © 2011-2022 走看看