diff --git a/package.json b/package.json new file mode 100644 index 0000000..832fa3b --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "typo.css", + "version": "2.1.2", + "description": "一致化浏览器排版效果，构建最适合中文阅读的网页排版", + "main": "typo.css", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://github.com/sofish/typo.css.git" + }, + "keywords": [ + "typograhpy", + "中文" + ], + "author": "sofish (http://sofi.sh/)", + "license": "MIT", + "bugs": { + "url": "https://github.com/sofish/typo.css/issues" + }, + "homepage": "https://github.com/sofish/typo.css" +} diff --git a/typo.css b/typo.css index 36a4ff1..2373d75 100644 --- a/typo.css +++ b/typo.css @@ -34,7 +34,7 @@ audio, canvas, video { /* 要注意表单元素并不继承父级 font 的问题 */ body, button, input, select, textarea { - font: 400 1em/1.8 Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; + font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; } button::-moz-focus-inner, @@ -58,8 +58,7 @@ fieldset, img { blockquote { position: relative; color: #999; - font-weight: 300; - font-family: Lantinghei SC, 'Helvetica Neue', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; + font-weight: 400; border-left: 1px solid #1abc9c; padding-left: 1em; margin: 1em 3em 1em 2em; @@ -75,6 +74,7 @@ blockquote { acronym, abbr { border-bottom: 1px dotted; font-variant: normal; + text-decoration: none; } /* 添加鼠标问号，进一步确保应用的语义是正确的（要知道，交互他们也有洁癖，如果你不去掉，那得多花点口舌） */ @@ -153,7 +153,7 @@ ins, a { * 要做到更好，向后兼容的话，添加 class="typo-u" 来显示专名号 * 关于标签：http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element * 被放弃的是 4，之前一直搞错 http://www.w3.org/TR/html401/appendix/changes.html#idx-deprecated - * 一篇关于标签的很好文章：http://html5doctor.com/u-element/ + * 一篇关于标签的很好文章：http://html5doctor.com/u-element/ */ u, .typo-u { text-decoration: underline; @@ -241,7 +241,7 @@ strong, b { } h1, h2, h3, h4, h5, h6 { - font-family: Verdana, 'Helvetica Neue', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; + font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif; font-weight: 100; color: #000; line-height: 1.35; diff --git a/typo.html b/typo.html index 54fc2a0..9a19c17 100644 --- a/typo.html +++ b/typo.html @@ -35,9 +35,9 @@

- -

@@ -89,10 +89,10 @@

现状和如何去做：

OS X - √ - √ - √ - √ + ✔ + ✔ + ✔ + ✔ - - - @@ -100,32 +100,32 @@

现状和如何去做：

Win 7 - √ - √ - √ - √ - √ - √ - √ + ✔ + ✔ + ✔ + ✔ + ✔ + ✔ + ✔ - Win XP - √ - √ - √ - √ + ✔ + ✔ + ✔ + ✔ - - √ - √ - √ + ✔ + ✔ + ✔ Ubuntu - √ - √ + ✔ + ✔ - - √ + ✔ - - - @@ -137,7 +137,7 @@

现状和如何去做：

中文排版的重点和难点

在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS 来实现，像着重号（例：这里强调一下）。在 HTML4 中，专名号标签（<u>）已经被放弃，而 - HTML5 被重新提起。Typo.css 也根据实际情况提供相应的方案。我们重要要注意的两点是：

+ HTML5 被重新提起。Typo.css 也根据实际情况提供相应的方案。我们重要要注意的两点是：

语义：语义对应的用法和样式是否与中文排版一致
表现：在各浏览器中的字体、大小和缩放是否如排版预期

1、Typo.css 排版偏重点

2、开源许可

Typo.css 基于 MIT License 开源，使用代码只需说明来源，或者引用 license.txt 即可。