CSS——行高、字型、文字的樣式

二九君發表於2020-11-06

一、行高

	行高(line height)
            行高指的是文字佔有的實際高度
            可以通過line-height來設定行高
                行高可以直接指定一個大小(ex pm)
                也可以設定一個整數
                如果是一個整數行高將會是字型的指定的倍數
                預設行高是1.33
            行高經常用來設定文字的行間距
                行間距等於行高減去字型大小
    字型框:
        設定字型框就是字型存在的格子,設定font-size實際上設定我們字型框的高度
   		行高會在字型框的上下平均分配

    可以將行高設定為和高度一樣的值,使單行文字在一個元素中垂直居中
        font-size: 50px;
        line-height: 200px;

二、字型

	/* font-face可以將伺服器中的字型直接提供給使用者去使用 */
    @font-face {
        /* 指定字型的名字 */
        font-family: 'myfont';
        /* 伺服器字型的路徑 */
        src: url('./xx/xxxx.ttf');
    }
    p{
        和font-size相關的單位
        em 相當於當前元素的一個font-size
        rem 相當於根元素的font-size
        font-family 字型族(字型的格式)
        可選值:
         serif  :襯線字型 
         sans-serif:非襯線字型
         monospace:等寬字型
         cursive:草書字型
         fantasy:虛幻字型
                    指定字型的類別 瀏覽器會自動使用該類別下的字型
         font-family可以指定多個字型 使用逗號隔開,
    優先使用第一個 第一個無法使用則使用第二個 以此類推。
	/*font-family: 'Courier New', Courier, monospace;*/


	font可以設定字型相關所有屬性 
                語法:字型大小/指定行高 字型族 
                行高可以省略不寫 如果不寫它會使用預設值
            	簡寫屬性省略用的是預設值
    font: 50px/2 'Courier New', Courier, monospace ;
      
     font-weight設定字型加粗效果 
            可選值:
                normal 預設值 不加粗
                bold 加粗
                100-900級別(沒什麼用)
                
     font-style :
                normal正常
                italic斜體

二、文字樣式

          text-align 文字的水平對齊
                可選值:
                    left左側對齊
                    right右側對齊
                    center居中對齊
                    justify兩端對齊
          vertical-align 垂直對齊
                 可選值
                    baseline 預設值 基線對齊
                    top頂部對齊 
                    bottom 底部對齊
                    middle 居中對齊
		text-decoration設定文字修飾
            	可選值:
                   none什麼都沒有
                   underline下劃線
                   line-through刪除線
                   overline上劃線
       white-space  用來設定網頁如何處理空白
                可選值:
                    normal正常
                    nowrap不換行
                    pre保留空白 保留文字格式
                    
       /* 設定省略號效果 */
        white-space:nowrap ;
        overflow: hidden;
        text-overflow: ellipsis;

相關文章