[置顶]CSS中文字体对照表

WEB++技术 unicac 没有评论

css字体名可以使用2种Unicode格式，以“微软雅黑”为例: DE>微软雅黑DE> 和 DE>\5FAE\8F6F\96C5\9ED1DE>，如果未找到需要的字体名称，可以到这里把简体中文转换为Unicode编码。

另外注意：繁体中文字体名，在简体中文系统中是不能被识别的。

中文名 英文名 Unicode Unicode 2
Mac OS
华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1 华文细黑
华文黑体 STHeiti \534E\6587\9ED1\4F53 华文黑体
华文楷体 STKaiti \534E\6587\6977\4F53 华文楷体
华文宋体 STSong \534E\6587\5B8B\4F53 华文宋体
华文仿宋 STFangsong \534E\6587\4EFF\5B8B 华文仿宋
丽黑 Pro LiHei Pro Medium \4E3D\9ED1 Pro 丽黑 Pro
丽宋 Pro LiSong Pro Light \4E3D\5B8B Pro 丽宋 Pro
标楷体 BiauKai \6807\6977\4F53 标楷体
苹果丽中黑 Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1 苹果丽中黑
苹果丽细宋 Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B 苹果丽细宋
Windows
新细明体 PMingLiU \65B0\7EC6\660E\4F53 新细明体
细明体 MingLiU \7EC6\660E\4F53 细明体
标楷体 DFKai-SB \6807\6977\4F53 标楷体
黑体 SimHei \9ED1\4F53 黑体
宋体 SimSun \5B8B\4F53 宋体
新宋体 NSimSun \65B0\5B8B\4F53 新宋体
仿宋 FangSong \4EFF\5B8B 仿宋
楷体 KaiTi \6977\4F53 楷体
仿宋_GB2312 FangSong_GB2312 \4EFF\5B8B_GB2312 仿宋_GB2312
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312 楷体_GB2312
微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53 微软正黑体
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 微软雅黑
Office
隶书 LiSu \96B6\4E66 隶书
幼圆 YouYuan \5E7C\5706 幼圆
华文细黑 STXihei \534E\6587\7EC6\9ED1 华文细黑
华文楷体 STKaiti \534E\6587\6977\4F53 华文楷体
华文宋体 STSong \534E\6587\5B8B\4F53 华文宋体
华文中宋 STZhongsong \534E\6587\4E2D\5B8B 华文中宋
华文仿宋 STFangsong \534E\6587\4EFF\5B8B 华文仿宋
方正舒体 FZShuTi \65B9\6B63\8212\4F53 方正舒体
方正姚体 FZYaoti \65B9\6B63\59DA\4F53 方正姚体
华文彩云 STCaiyun \534E\6587\5F69\4E91 华文彩云
华文琥珀 STHupo \534E\6587\7425\73C0 华文琥珀
华文隶书 STLiti \534E\6587\96B6\4E66 华文隶书
华文行楷 STXingkai \534E\6587\884C\6977 华文行楷
华文新魏 STXinwei \534E\6587\65B0\9B4F 华文新魏

16 个印象深刻的 HTML5/CSS3/JavaScript 体验

WEB++技术 unicac 没有评论

http://lab.hakim.se/scroll-effects 很酷的列表滚动效果

http://hakim.se/experiments/css/domtree 圣诞树

http://hakim.se/experiments/html5/origami 在一个丰富多彩的折叠上乱写乱画。在图纸上的任何地方 – 或使用键盘 – 激活不同的布局。

http://hakim.se/experiments/html5/404/netmag.html 异样的 404 错误页面

http://hakim.se/experiments/html5/sphere/ 球体 – 实际上是一个螺旋 – 建立了10000粒子和结构的变化，随着时间的推移。

http://textify.it/ 浏览器或拖动到页面上的图像以观看使用纯文本构建的图像。

http://hakim.se/experiments/webgl/particles/01/ 用来测试WebGL渲染粒子的效率

http://hakim.se/experiments/html5/breakdom/ 这是一个混合的经典突围游戏，除了所有的游戏元素与HTML用户界面元素已取代。

http://sinuousgame.com/ 一个使用 HTML Canvas 构建的游戏，考验你的鼠标指针反应。

http://hakim.se/experiments/html5/magnetic/02/ 控制和创建的粒子反应磁性节点的电流。

http://hakim.se/experiments/html5/wave/03/ 波浪与浮于表面的气泡

http://hakim.se/experiments/html5/trail/03/ 粒子的运动模式，生成光滑的小径。

http://hakim.se/experiments/html5/blob/03/ 软物体的模拟，就像是果冻

http://hakim.se/experiments/html5/bacterium/01/ 互动与俏皮的模拟动态物理世界中的细菌实验。

http://hakim.se/experiments/html5/particledepth/02/ 使用深度的​​粒子定位模式。

http://hakim.se/experiments/html5/keylight/03/ A playhead travels between keys which resonate in sound depending on where they are placed in the room.

BY: http://favbulous.com/post/969/16-impressive-css3-html5-and-javascript-experiments-from-hakim

JS代码判断IE6,IE7,IE8,IE9

JS,JQ菜鸟 unicac 没有评论

有一种代码：

  1. <script type="text/javascript">
  2. var browser=navigator.appName
  3. var b_version=navigator.appVersion
  4. var version=b_version.split(";");
  5. var trim_Version=version[1].replace(/[ ]/g,"");
  6. if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0")
  7. {
  8. alert("IE 6.0");
  9. }
  10. else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7.0")
  11. {
  12. alert("IE 7.0");
  13. }
  14. else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0")
  15. {
  16. alert("IE 8.0");
  17. }
  18. else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE9.0")
  19. {
  20. alert("IE 9.0");
  21. }
  22. </script>

第二种：

  1. <script type="text/javascript">
  2. if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE6.0")
  3. {
  4. alert("IE 6.0");
  5. }
  6. else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE7.0")
  7. {
  8. alert("IE 7.0");
  9. }
  10. else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE8.0")
  11. {
  12. alert("IE 8.0");
  13. }
  14. else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion .split(";")[1].replace(/[ ]/g,"")=="MSIE9.0")
  15. {
  16. alert("IE 9.0");
  17. }
  18. </script>

第三种：

  1. <script type="text/javascript">
  2. if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/7./i)=="7.")
  3. {
  4. alert("IE 7.0");
  5. }
  6. else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i)=="8.")
  7. {
  8. alert("IE 8.0");
  9. }
  10. else if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/9./i)=="9.")
  11. {
  12. alert("IE 9.0");
  13. }
  14. else if(navigator.appName == "Microsoft Internet Explorer")
  15. {
  16. alert("IE 6.0");
  17. }
  18. </script>

网页默认字体

WEB++技术 unicac 没有评论

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  5. <title>Web Default Font</title>
  6. </head>
  7. <body>
  8.  
  9. <h2>效果对比</h2>
  10.  
  11. <p style="font: 12px tahoma;">The quick brown fox jumps over the lazy dog. <a href="">下划线测试 english text</a> 1234567890 ,.?!:''" ，。？！：；'""'…… []{}()<>|/\`~@#$%^&*-+=© font: 12px tahoma;</p>
  12. <p style="font: 12px arial;">The quick brown fox jumps over the lazy dog. <a href="">下划线测试 english text</a> 1234567890 ,.?!:''" ，。？！：；'""'…… []{}()<>|/\`~@#$%^&*-+=© font: 12px arial;</p>
  13. <p style="font: 12px helvetica;">The quick brown fox jumps over the lazy dog. <a href="">下划线测试 english text</a> 1234567890 ,.?!:''" ，。？！：；'""'…… []{}()<>|/\`~@#$%^&*-+=© font: 12px helvetica;</p>
  14. <p style="font: 12px \5b8b\4f53;">The quick brown fox jumps over the lazy dog. <a href="">下划线测试 english text</a> 1234567890 ,.?!:''" ，。？！：；'""'…… []{}()<>|/\`~@#$%^&*-+=© font: 12px \5b8b\4f53;</p>
  15. <hr />
  16.  
  17. <h2>Tahoma 的问题</h2>
  18.  
  19. <h3>1) 下划线粘贴问题</h3>
  20. <p style="font: 12px Tahoma;"><a href="">所有浏览器里，下划线都会紧紧贴住中文字，很难看。font: 12px tahoma;</a></p>
  21. <ul><li style="font: 12px tahoma;"><a href="">IE6 下，如果链接在 li 元素里，则不会粘，显示得很好。（究竟是为什么呢？除了 li, 还有什么元素有此疗效？） font: 12px tahoma;</a></li></ul>
  22.  
  23. <h3>2) 13px 中文显示问题</h3>
  24. <p style="font: 12px tahoma;">在 IE6 里，13px 的中文很难看。其它浏览器会用 12px 来显示。font: 12px tahoma;</p>
  25. <p style="font: 13px tahoma;">在 IE6 里，13px 的中文很难看。其它浏览器会用 12px 来显示。font: 13px tahoma;</p>
  26. <p style="font: 14px tahoma;">在 IE6 里，13px 的中文很难看。其它浏览器会用 12px 来显示。font: 14px tahoma;</p>
  27.  
  28. <h3>3) 中英文混排问题</h3>
  29. <p style="font: 12px tahoma;"><a href="">如果一行里同时出现中文和英文，且这一行里有元素被定义了 <span style="vertical-align: top;">vertical</span>-align 属性，在IE6-8 里会导致文字高低不齐，甚至下划线错位。font: 12px tahoma;</a></p>
  30. <p style="font: 12px tahoma;zoom: 1">zoom: 1 触发 hasLayout <strong>不能</strong>解决所有问题。 <a href="">中文与英文混排 <span style="vertical-align: top;">vertical</span>-align。font: 12px tahoma;</a></p>
  31. <hr />
  32.  
  33. <h2>Arial 的问题</h2>
  34.  
  35. <h3>1) 下划线粘贴问题</h3>
  36. <p style="font: 12px arial;"><a href="">除了 IE6, 其它所有浏览器里，下划线都会紧紧贴住中文字，很难看。font: 12px arial;</a></p>
  37.  
  38. <h3>2) 13px 中文显示问题</h3>
  39. <p style="font: 12px arial;">在 IE6 里，13px 的中文显示比 Tahoma 好，但依旧有点怪。其它浏览器会用 12px 来显示。font: 12px arial;</p>
  40. <p style="font: 13px arial;">在 IE6 里，13px 的中文显示比 Tahoma 好，但依旧有点怪。其它浏览器会用 12px 来显示。font: 13px arial;</p>
  41. <p style="font: 14px arial;">在 IE6 里，13px 的中文显示比 Tahoma 好，但依旧有点怪。其它浏览器会用 12px 来显示。font: 14px arial;</p>
  42.  
  43. <h3>3) 中英文混排问题</h3>
  44. <p style="font: 12px arial;"><a href="">如果一行里同时出现中文和英文，且这一行里有元素被定义了 <span style="vertical-align: top;">vertical</span>-align 属性，在IE6-8 里会导致文字高低不齐，<strong>IE6 里下划线不会错位</strong>，IE7-8 里下划线错位。font: 12px arial;</a></p>
  45. <p style="font: 12px arial;zoom: 1">zoom: 1 触发 hasLayout <strong>不能</strong>解决所有问题。 <a href="">中文与英文混排 <span style="vertical-align: top;">vertical</span>-align。font: 12px arial;</a></p>
  46. <hr />
  47.  
  48. <h2>Helvetica 的问题</h2>
  49.  
  50. <h3>1) 找不到时，漠视第二字体</h3>
  51. <p style="font: 12px helvetica,tahoma;">[] 用 font: 12px helvetica,tahoma; 定义字体时，在 XP / Win7 等操作系统中，如果没有安装 helvetica 字体，会直接调用默认字体，而不是排在第二的 tahoma.</p>
  52. <p style="font: 12px helvetica2,tahoma;">[] 恼人的是，用 font: 12px helvetica2,tahoma; 定义字体时，会调用排在第二的 tahoma. 浏览器的世界，啥都有可能。</p>
  53. <p style="font: 12px xxx,tahoma;">[] 或者 font: 12px xxx,tahoma; 一切正常。<strong>helvetica 进了某个秘密名单？</strong></p>
  54.  
  55. <h3>2) 非 Mac 下的 Helvetica 都是 Rip 版，效果不是很好</h3>
  56. <hr />
  57.  
  58. <h2>宋体的问题</h2>
  59.  
  60. <h3>1) Opera 下，只认 "宋体"， 不认 SimSun</h3>
  61. <p style="font: 12px '宋体', '微软雅黑';">Opera 下，只认 "宋体"， 不认 SimSun. font: 12px '宋体', '微软雅黑';</p>
  62. <p style="font: 12px SimSun, '微软雅黑';">Opera 下，只认 "宋体"， 不认 SimSun. font: 12px SimSun, '微软雅黑';</p>
  63. <p style="font: 12px \5b8b\4f53, '微软雅黑';">为了避免编码问题，推荐用：font: 12px \5b8b\4f53, '微软雅黑';</p>
  64. <p style="font: 12px arial;">font: 12px arial; 此时，Opera 默认中文字体就是宋体。</p>
  65. <p style="font: 12px sans-serif;">font: 12px sans-serif; 此时，Opera 默认中文字体就是宋体。</p>
  66. <p style="font: 12px tahoma,arial,simsun,sans-serif;">font: 12px tahoma,arial,simsun,sans-serif; 对于'宋体'来说，如果后面已经没有中文字体，用 simsun 还是 ok 的。</p>
  67.  
  68. <h3>2) 设计偏好</h3>
  69. <p style="font: 12px \5b8b\4f53;">宋体自带的英文和标点很难看，中英混排效果不好。中文和abcgtrfhjj256346中文</p>
  70. <p style="font: 12px \5b8b\4f53;">优点是：英文字符是中文的一半，对齐容易。</p>
  71. <hr />
  72.  
  73. <h2>行高问题</h2>
  74.  
  75. <p style="height: 12px; margin: 0; padding: 0; font: 12px/1 \5b8b\4f53;">font: 12px/1 \5b8b\4f53; 行高为 1 时，IE6-7 下，高度不够时，会导致中文上下显示不全。</p>
  76. <p style="margin: 0; padding: 0; font: 12px/1.5 \5b8b\4f53;">font: 12px/1.5 \5b8b\4f53; 行高为 1.5 时，一切正常。</p>
  77. <hr />
  78.  
  79. <h2>GB 编码的问题</h2>
  80.  
  81. <p style="font: 12px sans-serif;">font: 12px sans-serif; 不设置宋体，页面为 GB 系列编码时，非中文操作系统下，IE 的默认字体是 Microsoft Sans Serif Regular, 很难看。</p>
  82. <p style="font: 12px simsun,sans-serif;">font: 12px simsun,sans-serif; 不设置宋体，页面为 GB 系列编码时，非中文操作系统下，IE 的默认字体是 Microsoft Sans Serif Regular, 很难看。</p>
  83. <p style="font: 12px arial;">font: 12px arial; 可以不写 sans-serif 来避免上面的问题。譬如百度的首页。 测试文字：设置宋体。</p>
  84.  
  85. <hr />
  86. <h2>总结</h2>
  87.  
  88. 可以看出，与 Tahoma 相比，Arial 只在 IE6 下略有优势。考虑以上各点，推荐使用以下方案：
  89. <br/><br/>
  90. 理想主义者方案 A（所有页面用 utf-8 编码）：
  91. <pre>
  92. font: 12px/1.5 tahoma, arial, sans-serif;
  93. </pre>
  94. 理想主义者方案 B（有 gb 编码的页面）：
  95. <pre>
  96. font: 12px/1.5 tahoma, arial, simsun, sans-serif;
  97. </pre>
  98. 现实主义者方案 A：
  99. <pre>
  100. font: 12px/1.5 tahoma, arial;
  101. </pre>
  102. 现实主义者方案 B：
  103. <pre>
  104. font: 12px/1.5 arial;
  105. </pre>
  106. </body>
  107. </html>

弹出框口 用框架做的可以跳出一切遮挡

WEB++技术 unicac 没有评论

  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.  
  8. <body>
  9. <script language="JavaScript">
  10. //----------------------写HTML代码----------------------
  11. var changdi="<table style='margin:0 0 0 0;border:solid 1px #009933;background:#ffffff''><tr><td align='center' vlign='middle'><img src='../website/image/tips.jpg' width=50 height=50 /></td><td align='center' vlign='middle'><span><a href='#'  onClick='return nd()'>[X]</a><p color='green' >这个地方放那些需要的泡泡内容<p></td></tr></table>";
  12. //------------------------------------------------------
  13. var isIE  =  document.all?true:false;
  14. function overlib(tipcontent)
  15. {
  16.    customdiv = document.getElementById("overDiv");
  17.    customdiv2 = document.getElementById("overDiv2");
  18.     customdiv.innerHTML = tipcontent;
  19.     var tleft=document.body.scrollLeft+window.event.clientX;
  20.     var ttop=document.body.scrollTop+window.event.clientY;
  21.     if(document.body.clientWidth < 300)
  22.    {
  23.         customdiv.style.left = 2;
  24.         customdiv2.style.left = 2;
  25.     }
  26.     else if (tleft > document.body.clientWidth-200)
  27.    {
  28.         customdiv.style.left = tleft-175;
  29.          customdiv2.style.left = tleft-175;
  30.     }
  31.     else
  32.    {
  33.         customdiv.style.left = tleft + 10;
  34.          customdiv2.style.left = tleft + 10;
  35.     }
  36.     if(document.body.clientHeight < 100)
  37.     {
  38.         customdiv.style.top = 25;
  39.           customdiv2.style.top = 25;
  40.     }
  41.     else if(ttop > document.body.clientHeight -55)
  42.   {
  43.         customdiv.style.top = ttop - 55;
  44.          customdiv2.style.top = ttop - 55;
  45.     }
  46.     else
  47.     {
  48.         customdiv.style.top = ttop + 10;
  49.         customdiv2.style.top = ttop + 10;
  50.     }
  51.       customdiv2.style.width=customdiv.clientWidth;
  52.       customdiv2.style.height=customdiv.clientHeight;
  53.       customdiv.style.visibility = 'visible';
  54.       customdiv2.style.visibility = 'visible';
  55. }
  56. function nd()
  57. {
  58.     customdiv = document.getElementById("overDiv");
  59.     customdiv2 = document.getElementById("overDiv2");
  60.     customdiv.style.width=0;
  61.     customdiv.style.height=0;
  62.     customdiv.style.visibility    = 'hidden';
  63.     customdiv2.style.visibility    = 'hidden';
  64. }
  65. function b(v)
  66. {
  67. window.status=v
  68. };
  69.  
  70. </script>
  71. <div id="overDiv" style="position:absolute; visibility:hidden;z-index:100;padding:0 0 0 0;background:#FDFEF9;text-align:left;font-size:12px;">
  72.        </div>
  73.        <iframe id="overDiv2" src="" scrolling="no" frameborder="no"style="position:absolute; visibility:hidden;z-index:99;filter: Alpha(style=0,opacity=0) "> </iframe>
  74.  
  75. <input name="" value="12312312321" type="button" /> <select name="">
  76.   <option value="1">1123123123123123</option>
  77.   <option value="2">2123123213123</option>
  78.   <option value="3">344444444444444</option>
  79. </select>
  80. </body>
  81. </html>

Internet Explorer hacks

WEB++技术 unicac 没有评论

  1. color:red;
  2. color:blue\9;  /* all ie*/
  3. color:green\0;  /* ie8*/
  4. *color:yellow; /* ie7 and ie6*/
  5. +color:orange; /* ie7*/
  6. _color:black; /* ie6*/
  7. .class {
  8.   width:200px; /* All browsers */
  9.   *width:250px; /* IE */
  10.   _width:300px; /* IE6 */
  11.   .width:200px; /* IE7 */
  12. }
下一页