1. 爱易网页
  2. CSS教程
  3. 网页设计教程:CSS文字排版技巧大全

网页设计教程:CSS文字排版技巧大全

日期：2013-12-26　 浏览次数：20994 次

网页制造aiyiweb文章简介：CSS文字排版终极指南.

译自：The Ultimate Guide to CSS Typography
中文：CSS文字排版终极指南
请尊重版权，转载请注明来源！多谢。

在今天的设计中，排版常常被忽视，特别是被网页设计师忽视。这真是件遗憾的事情由于CSS可以做很多事情来控制我们的排版。也就是说，我们被局限于某些“网络安全”排版，但是我们不应该限制我们本人的创造性。本文整理了一些用于在网页上排版的CSS技巧。

Font属性

CSS提供了font属性，它允许我们在我们的页面中调整文字。这是一系列的关于语法和如何使用CSS调整文字的概述。

Font-size

使用font-size可以修正你的文字的大小。

1
2
3

font-size: 1.2em;
font-size: 12px;
font-size: 10pt;
预览
  1. 文字大小为1.2em.
  2. 文字大小为12px.
  3. 文字大小为10pt.

 

Font-weight

该属性用来改变你的文字的粗细(比如bold, bolder)

1
2
3
4

font-weight: normal;
font-weight: bold;
font-weight: bolder;
font-weight: lighter;
预览
  1. font-weight设置为normal
  2. font-weight设置为bold
  3. font-weight设置为bolder
  4. font-weight设置为lighter

font-weight属性还可以使用100,200,300,400,500,600,700,800,900等数字值，数字越大，文字越粗。400等效于normal，700等效于bold。

Text-transform

text-transform属性允许你使用uppercase(大写), lowercase(小写), 以及capitalize(首字母大写)等效果到你的文字。当然，该属性不能用于中文。

1
2
3
4




                        

                    
                    


                    

                    



    

        
相关资料更多>

    

    

        
    

            
                  
    
                      
  1. 
                        网页制作教程:CSS打印样式技巧
    2. 
                   
                
                  
    
                      
  2. 
                        网站重构是一种思想和理念
    3. 
                   
                
                  
    
                      
  3. 
                        css拔出透明png(IE6下PNG背景透明）
    4. 
                   
                
                  
    
                      
  4. 
                        看法：HTML网页中默许的CSS样式表属性总结
    5. 
                   
                
                  
    
                      
  5. 
                        CSS初级入门：页面样式的全体声明
    6. 
                   
                
                  
    
                      
  6. 
                        想让DIV居中，如何编写CSS的呢？
    7. 
                   
                
                  
    
                      
  7. 
                        CSS变换计时与延迟:CSS变换(transition)
    8. 
                   
                
                  
    
                      
  8. 
                        快速定位到复杂的CSS BUG效果
    9. 
                   
                
                  
    
                      
  9. 
                        总结：CSS编写进程中罕见的10个错误
    10.