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

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

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

网页制造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教程:text-indent隐藏文字出现虚线框outline
    2. 
                   
                
                  
    
                      
  2. 
                        运用CSS固定背景
    3. 
                   
                
                  
    
                      
  3. 
                        学习CSS规划网页的一些实例
    4. 
                   
                
                  
    
                      
  4. 
                        CSS奇特技巧：控制文字竖排
    5. 
                   
                
                  
    
                      
  5. 
                        淘宝店铺首页设计:店铺作风和信息设计
    6. 
                   
                
                  
    
                      
  6. 
                        css完成圆角矩形边框
    7. 
                   
                
                  
    
                      
  7. 
                        网页设计参考:网页中文字体对应的英文名
    8. 
                   
                
                  
    
                      
  8. 
                        CSS适用教程（二）
    9. 
                   
                
                  
    
                      
  9. 
                        CSS网页制造教程:网页内容换行控制
    10.