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

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

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

网页制造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新手整理的CSS技巧
    2. 
                   
                
                  
    
                      
  2. 
                        CSS幻灯片教程:制造高效可维护组件化的CSS代码
    3. 
                   
                
                  
    
                      
  3. 
                        CSS网页规划网页制造技巧总结
    4. 
                   
                
                  
    
                      
  4. 
                        CSS教程(3)：经过实例学习CSS背景
    5. 
                   
                
                  
    
                      
  5. 
                        CSS技巧：旧事网页标题定义的最好方法
    6. 
                   
                
                  
    
                      
  6. 
                        CSS网页设计实例:纯CSS制造的网页的loading
    7. 
                   
                
                  
    
                      
  7. 
                        XHTML+CSS教程:灵敏运用HTML标志
    8. 
                   
                
                  
    
                      
  8. 
                        CSS样式表最佳习气
    9. 
                   
                
                  
    
                      
  9. 
                        CSS教程:面向对象CSS FAQ
    10.