V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
Livid
V2EX  ›  CSS

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

  •  
  •   Livid · 2012-01-09 15:06:13 +08:00 · 11722 次点击
    这是一个创建于 4693 天前的主题,其中的信息可能已经有所发展或是发生改变。
    35 条回复    1970-01-01 08:00:00 +08:00
    Sivan
        1
    Sivan  
       2012-01-09 15:10:49 +08:00
    sofish
        2
    sofish  
       2012-01-13 17:28:34 +08:00
    没想到被发到这里来了,这个还在开发中,推荐看看为什么要 typo.css https://github.com/sofish/typo.css#readme
    underone
        3
    underone  
       2012-01-13 18:01:28 +08:00
    @sofish 你们这是要改变世界呀:) 赞一个...
    neozhang
        4
    neozhang  
       2012-01-13 18:05:20 +08:00
    赞!看了排版效果,真的很舒服。
    morro
        5
    morro  
       2012-01-13 18:35:10 +08:00
    Numbcoder
        6
    Numbcoder  
       2012-01-13 19:17:21 +08:00
    @sofish 赞啊!
    能不能根据不同的系统,自动采用最适合排版和阅读的字体?
    sofish
        7
    sofish  
       2012-01-13 22:15:31 +08:00 via iPhone
    @numbcoder 这是必须的,排版都会适合自适应
    gonefish
        8
    gonefish  
       2012-01-13 22:25:16 +08:00
    超赞,变革吧!!!
    lenti
        9
    lenti  
       2012-01-13 22:47:19 +08:00
    @sofish 非常不错的东西,很赞,路上所说的自动采用合适的字体是什么机制呢
    dimlau
        10
    dimlau  
       2012-01-14 00:59:28 +08:00
    例1:论语学而篇第一

    作者:孔子(前551年9月28日-前479年4月11日)
    sofish
        11
    sofish  
       2012-01-14 06:52:58 +08:00
    @lenti 不是自动采集。而是适当的字体选择,让排版适应不同系统以达到最佳效果
    CrazyApi
        12
    CrazyApi  
       2012-03-31 13:41:52 +08:00
    看看能不能整合到Octopress里面去
    est
        13
    est  
       2012-03-31 21:55:12 +08:00
    杭州人才真多啊。真心赞美一个。

    typo.css第一眼看上去还以为是纠错的。。
    da_a
        14
    da_a  
       2012-04-02 12:04:25 +08:00
    看起来不错:)
    zhuzhuor
        15
    zhuzhuor  
       2012-04-02 14:02:37 +08:00
    额,typo是手误/拼写错误的意思...
    那原作者是故意叫这个名字的么?......
    heidour
        16
    heidour  
       2012-04-02 14:45:22 +08:00 via iPhone
    @zhuzhuor 从typography简称过来吧?
    zhuzhuor
        17
    zhuzhuor  
       2012-04-03 00:49:16 +08:00
    @heidour 估计是这样
    但是typo用做拼写错误更加常见恩...貌似楼上est也是跟我一样看错了
    另外发现原作者也在这贴里回复...
    sofish
        18
    sofish  
       2012-04-03 01:42:34 +08:00
    其实无意造成误解。最近也用在自己的项目上... 也将会集成到另外一个前端框架里。大家有用上的,有问题的,可以找我... 有兴趣参与开发的欢迎在 Github 给我 pull request
    lianghai
        19
    lianghai  
       2012-04-03 02:17:50 +08:00
    @zhuzhuor: 意为「拼写错误」的「typo」是「typography」的缩略,而且确实「typography」在此之外很少有这样独立的缩略。
    zhuzhuor
        20
    zhuzhuor  
       2012-04-03 02:22:48 +08:00
    @sofish 挺好的,已经watch了,加油!
    lianghai
        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 到系统默认的黑体。各平台的效果非常不一致,这真的是你期待的效果吗?
    lianghai
        22
    lianghai  
       2012-04-03 02:25:12 +08:00
    @sofish:呃,为何这样写呢:

    pre, code {
    font-family: 'Courier New', Courier, serif;
    }
    yt1988
        23
    yt1988  
       2012-04-03 02:58:19 +08:00
    @underone @sofish 持续关注 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 后面?这是我个人喜好。瘦一点的字体让代码块看起来不会太影响整个文章,把这些内容当附加物,以达到整个页面的整洁。
    spritevan
        25
    spritevan  
       2012-04-03 12:43:16 +08:00
    @sofish pre,code 一般来说会指定字族为 monospace 吧
    lianghai
        26
    lianghai  
       2012-04-03 12:47:13 +08:00
    @sofish
    好吧,大致明白你的考量了。行高的 bug 指的是这个吗: http://www.99css.com/archives/801
    「pre, code」那个我指的是「… serif;」,这里为何要写「serif」而非「monospace」?
    subpo
        27
    subpo  
       2012-04-03 12:49:03 +08:00
    赞!!迫不及待的想用起来
    sofish
        28
    sofish  
       2012-04-03 13:02:59 +08:00
    @lianghai 嗯。这是其中一种问题吧,但主要指的还是在像 input 这种 padding 和 height 设置了在各个系统表示不一致的问题。都可以用 padding,但在不同系统又撑不开。或者说两个 div 用 padding 来撑高高度不一样的问题。
    lianghai
        29
    lianghai  
       2012-04-03 13:09:59 +08:00
    @sofish:抱歉,我对 Windows 各浏览器的了解比较少—— <input> 和 <div> 这些情况如果用 line-height 而非 padding 来设定高度,主要的问题是?(无法精确纵向的位置?)
    sofish
        30
    sofish  
       2012-04-03 13:20:52 +08:00
    @lianghai 写测试啊。你总不能让写 ruby 的人给你所有实现方法吧?一来没时间,二来没时间,三来确实没有很多时间。
    lianghai
        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」的问题,还缺少和正文一致的中文字体声明。
    subpo
        32
    subpo  
       2012-04-24 17:00:08 +08:00
    @sofish 顶旧帖,把@lianghai 说的问题重视起来嘛。
    而且个人觉得雅黑在正文中感觉不是很好看吧。
    lianghai
        33
    lianghai  
       2012-04-24 19:42:48 +08:00   ❤️ 1
    @subpo: 这是个人考量不同,不是重视不重视的问题。如果需要自己喜欢的字体风格,可以 fork 嘛。
    lianghai
        34
    lianghai  
       2012-04-24 19:45:26 +08:00
    @subpo: 而且 Windows 用户中,在正文字号偏好中易宋体点阵的和偏好微软雅黑的两群用户是永远无法调和的矛盾。
    subpo
        35
    subpo  
       2012-04-24 21:28:54 +08:00
    @lianghai fork了,哈哈 原来还有这个说法啊,我正文中最不喜欢见到非衬线字体了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2689 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 15:44 · PVG 23:44 · LAX 07:44 · JFK 10:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.