TYPO.CSS - 中文网页重设与排版

35 条回复 • 1970-01-01 08:00:00 +08:00

1

Sivan

2012-01-09 15:10:49 +08:00

http://ethantw.net/projects/han/

2

sofish

2012-01-13 17:28:34 +08:00

没想到被发到这里来了，这个还在开发中，推荐看看为什么要 typo.css https://github.com/sofish/typo.css#readme

3

underone

2012-01-13 18:01:28 +08:00

@sofish 你们这是要改变世界呀:) 赞一个...

4

neozhang

2012-01-13 18:05:20 +08:00

赞！看了排版效果，真的很舒服。

5

morro

2012-01-13 18:35:10 +08:00

6

Numbcoder

2012-01-13 19:17:21 +08:00

@sofish 赞啊！
能不能根据不同的系统，自动采用最适合排版和阅读的字体？

7

sofish

2012-01-13 22:15:31 +08:00 via iPhone

@numbcoder 这是必须的，排版都会适合自适应

8

gonefish

2012-01-13 22:25:16 +08:00

超赞，变革吧！！！

9

lenti

2012-01-13 22:47:19 +08:00

@sofish 非常不错的东西，很赞，路上所说的自动采用合适的字体是什么机制呢

10

dimlau

2012-01-14 00:59:28 +08:00

例1：论语学而篇第一

作者：孔子（前551年9月28日－前479年4月11日）

11

sofish

2012-01-14 06:52:58 +08:00

@lenti 不是自动采集。而是适当的字体选择，让排版适应不同系统以达到最佳效果

12

CrazyApi

2012-03-31 13:41:52 +08:00

看看能不能整合到Octopress里面去

13

est

2012-03-31 21:55:12 +08:00

杭州人才真多啊。真心赞美一个。

typo.css第一眼看上去还以为是纠错的。。

14

da_a

2012-04-02 12:04:25 +08:00

看起来不错:)

15

zhuzhuor

2012-04-02 14:02:37 +08:00

额，typo是手误/拼写错误的意思...
那原作者是故意叫这个名字的么?......

16

heidour

2012-04-02 14:45:22 +08:00 via iPhone

@zhuzhuor 从typography简称过来吧？

17

zhuzhuor

2012-04-03 00:49:16 +08:00

@heidour 估计是这样
但是typo用做拼写错误更加常见恩...貌似楼上est也是跟我一样看错了
另外发现原作者也在这贴里回复...

18

sofish

2012-04-03 01:42:34 +08:00

其实无意造成误解。最近也用在自己的项目上... 也将会集成到另外一个前端框架里。大家有用上的，有问题的，可以找我... 有兴趣参与开发的欢迎在 Github 给我 pull request

19

lianghai

2012-04-03 02:17:50 +08:00

@zhuzhuor: 意为「拼写错误」的「typo」是「typography」的缩略，而且确实「typography」在此之外很少有这样独立的缩略。

20

zhuzhuor

2012-04-03 02:22:48 +08:00

@sofish 挺好的，已经watch了，加油!

21

lianghai

2012-04-03 02:23:48 +08:00

@sofish：
为何要选 Times New Roman 作首选西文字体？它在任何操作系统里的效果都称不上是高质量的正文字体吧？
「… "Microsoft Yahei", serif」这个写法又是为了什么呢？对于中文，没有微软雅黑就用系统默认的衬线字体？Windows 会 fallback 到中易宋体（但「… "Microsoft Yahei", sans-serif」也会这样 fallback 啊），Mac OS X 会 fallback 到华文宋体，而大多数移动操作系统都会 fallback 到系统默认的黑体。各平台的效果非常不一致，这真的是你期待的效果吗？

22

lianghai

2012-04-03 02:25:12 +08:00

@sofish：呃，为何这样写呢：

pre, code {
font-family: 'Courier New', Courier, serif;
}

23

yt1988

2012-04-03 02:58:19 +08:00

@underone @sofish 持续关注 sofish，可以整合到那个前端方案里？

24

sofish

2012-04-03 12:24:42 +08:00

@lianghai Times New Roman 可以解决各种 input 和其他元素行高导致的问题。Verdana 是我在 Windows 下觉得质量非常不错的字体，可惜这个字体在各种系统的不同浏览器，甚至在相同系统的浏览器都会导致行高不同的 bug。

至于为什么用 yahei，其实我更偏向于用 serif 字体，fallback 到宋体是我想要的效果。只不过 windows xp/7 的宋体很难看，xp 没办法，但 Win7 的 yahei 还是非常不错的，而且可以跟 Times New Roman 混排。其实这中间有一个不错的 Georgia 作为选择，这也是我个人非常喜欢的一个字体，但 Georgia。

至于为什么 pre,code 你是指 Courier 写在 Courier New 后面？这是我个人喜好。瘦一点的字体让代码块看起来不会太影响整个文章，把这些内容当附加物，以达到整个页面的整洁。

25

spritevan

2012-04-03 12:43:16 +08:00

@sofish pre,code 一般来说会指定字族为 monospace 吧

26

lianghai

2012-04-03 12:47:13 +08:00

@sofish：
好吧，大致明白你的考量了。行高的 bug 指的是这个吗： http://www.99css.com/archives/801
「pre, code」那个我指的是「… serif;」，这里为何要写「serif」而非「monospace」？

27

subpo

2012-04-03 12:49:03 +08:00

赞！！迫不及待的想用起来

28

sofish

2012-04-03 13:02:59 +08:00

@lianghai 嗯。这是其中一种问题吧，但主要指的还是在像 input 这种 padding 和 height 设置了在各个系统表示不一致的问题。都可以用 padding，但在不同系统又撑不开。或者说两个 div 用 padding 来撑高高度不一样的问题。

29

lianghai

2012-04-03 13:09:59 +08:00

@sofish：抱歉，我对 Windows 各浏览器的了解比较少—— <input> 和 <div> 这些情况如果用 line-height 而非 padding 来设定高度，主要的问题是？（无法精确纵向的位置？）

30

sofish

2012-04-03 13:20:52 +08:00

@lianghai 写测试啊。你总不能让写 ruby 的人给你所有实现方法吧？一来没时间，二来没时间，三来确实没有很多时间。

31

lianghai

2012-04-03 14:32:32 +08:00

@sofish：
我的意思是：我通常用 line-height 来设定这些对象的高度，并没有遇到严重到必须用 Times New Roman 这种糟糕的字体来解决的问题。所以希望了解一下你到底为何做出这样（用 Times New Roman 作正文字体）的决定。
因为不明白你到底是因为什么问题而做出这样的决定，所以我也没法写测试。

另外，「pre, code { font-family: 'Courier New', Courier, serif; }」不仅有「serif」的问题，还缺少和正文一致的中文字体声明。

32

subpo

2012-04-24 17:00:08 +08:00

@sofish 顶旧帖，把@lianghai 说的问题重视起来嘛。
而且个人觉得雅黑在正文中感觉不是很好看吧。

33

lianghai

2012-04-24 19:42:48 +08:00

1

@subpo: 这是个人考量不同，不是重视不重视的问题。如果需要自己喜欢的字体风格，可以 fork 嘛。

34

lianghai

2012-04-24 19:45:26 +08:00

@subpo: 而且 Windows 用户中，在正文字号偏好中易宋体点阵的和偏好微软雅黑的两群用户是永远无法调和的矛盾。

35

subpo

2012-04-24 21:28:54 +08:00

@lianghai fork了，哈哈原来还有这个说法啊，我正文中最不喜欢见到非衬线字体了。