码迷,mamicode.com
首页 > 其他好文 > 详细

西方字体设计与排版基础知识

时间:2015-03-10 19:40:42      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:css 基线 line-height base line

在css中有个叫line-height的样式,该样式是设置行高用的,在查阅一些文档后发现对于字体而言存在着base-line的概念,而且都没具体讲清楚它的由来等,然后我捉摸着浏览器的排版规则应该是基于早期的文字排印来的,然后整理了下该方面的内容,供后面的学习参考,首先来看下以下这张图片:

技术分享

 

1,baseline:基线,指的是多数字母排列的基准线。如图所示,大多数字母都是沿着红色基线排列,唯有“p”向下延伸超过基线,超过的部分称为“将部”。

    基线准则:

        -- 大写字母位于基线上。最常见的例外是J和Q。

        -- 不齐线数字(见阿拉伯数字)位于基线上。

        -- 以下不齐线数字有降部:3 4 5 7 9。

        -- 以下小写字母有降部:g j p q y。

        -- 有着圆形上下区段的字符,如(0 3 6 8 c C G J o O Q),它们比基线略微有所下沉(overshoot)来造成了一种它们坐落于基线以上的光学幻觉,通过比X字高或大写高度略高来制造它们和flat glyphs如(H x X 1 5 7)同样高度的错觉。Peter Karowand的Digital Typefaces中建议,标准的overshoot应当在1.5%左右。

 

    东亚字体没有基线,每个字符坐落在一个方形盒子中,既无升部也无降部。当它与具有低基线的字体混合使用时,东亚字符应当被调整,使其字符底部在低基线字体的基线和降部高度之间。

    

        关于“不齐线数字”可参考:http://zh.wikipedia.org/wiki/%E4%B8%8D%E9%BD%90%E7%BA%BF%E6%95%B0%E5%AD%97

 

2,mean line:主线,指的是决定无升部的小写字母字体大小的一条线,其与基线的距离称为x字高。有些圆弧的字母在某些字体中会些微超过主线的范围,是为了美观。

 

3,x-height:x字高,在西文字体排印学中,x字高,(英语:x-height或corpus size)是指字母的基本高度,精确地说,就是基线(英语:baseline)和主线之间的距离。特别的,它指称一个字体中小写字母x的高度(这也是这个词的语源),而实际上这也和字母a、c、e、m、n、o、r、s、u、v、w和z的高度是一样的。尽管如此,在现代字体设计领域里,x字高代表了一个字体的设计因素,因此在一些场合,字母x本身并不完全等于x字高。

在西文中,除了上文提到的字母以外,其他小写字母的字高都要比x字高要大,并分为两类,一种是含有降部的字母,字母的笔画向下超过了基线,比如字母y、g、q和p;另一类是含有升部的字母,字母笔画含有向上部分,如l、k、b和d。x字高和字母主字高(英语:body height)的比例是考察一个字体设计的重要因素。

在西文的具体字体以及排版术语中,x字高通常被称为一个ex,这和把大写字母M的宽度称为一个em的习惯类似。

 

 4,cap height:基准线到大写字母的高度。

技术分享

 

 5,ascender height:  上升部,小写字母中超出小写字母x高度的部分

 6,descender height:小写字母中在基准线以下延伸的部分的高度,例如:g,j,p,q,y

技术分享

 

 

附件中的图片提供更多的名词解释~~~

 

 

 

本文出自 “因简单而自在” 博客,请务必保留此出处http://dengshuangfu.blog.51cto.com/8794650/1618983

西方字体设计与排版基础知识

标签:css 基线 line-height base line

原文地址:http://dengshuangfu.blog.51cto.com/8794650/1618983

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!