文本元素 · web前端

[TOC] # 文本元素 ## 屬性 ~~~ font-size:16px; 文字大小 font-weight: 700 ; 值從100-900，文字粗細,normal不加粗，不推薦使用font-weight:bold; font-family:微軟雅黑; 文本的字體,最好加引號 font-style: normal | italic; normal 默認值,取消傾斜 italic 斜體 line-height: 行高 ~~~ 盡量使用偶數字號,ie6在奇數下會存在問題. 現在大部分默認是14px 字體傾斜除了用i和em之外,可以用css,但是css沒有語義 ## 文本屬性連寫 ~~~ font: font-style font-weight font-size/line-height font-family; ~~~ ◆：注意：font:后邊寫屬性的值。一定按照書寫順序。其中不需要的可以省略, ◆：font-size和字體font-family為必寫項。各個屬性空格隔開 ~~~ font:italic 700 16px/40px 微軟雅黑; ~~~ ~~~ font: italic 700 16px/40px 微軟雅黑; ~~~ ## 文字的表達方式直接寫中文名稱 ~~~ div{ font-family : 微軟雅黑; } ~~~ 寫字體的英文名稱 ~~~ div{ font-family : "microsoft yahei"; } ~~~ unicode編碼 ![](https://box.kancloud.cn/632b315b2898b09de2b87b1eb4ce36dd_290x293.png) 第一步:f12 第二步:找到console 第三步:輸入`escape("宋體")` 注意英文括號和雙引號,就可以得到編碼了 ## 行間距 `line-height` 行與行之間的距離,字符的垂直間距,一般稱為行高. 一般情況下,行距比字號大7.8像素左右就行 ## 字間距 ~~~ letter-spacing: 2px; ~~~ ## 水平對齊方式 text-align 水平對齊方式用于設置文本內容的水平對齊,相當于html中的align對齊屬性可用值如下: * left: 左對齊(默認值) * right: 右對齊 * center: 居中對齊 ## 首行縮進 `text-indent` 屬性值可以為不同單位的數值,em字符寬度的倍數,或相當于瀏覽器窗口寬度的百分比%,允許使用負值,建議使用em 1em就是一個字的寬度, 是一個字的寬度, 如果是漢字段落, 他就是漢字寬度 ## 文本裝飾 `text-decoration`通常用于給鏈接修改裝飾效果可以把a標簽的下劃線取消 | 值 | 描述 | | --- | --- | | none | 默認,定義標準的文本,取消裝飾 | | underline | 定義文本下的一條線,下劃線也是我們鏈接自帶的 | | overline | 定義文本上的一條線 | | line-through | 定義穿過文本下的一條線 | ## 文字移除內容使用`text-indent:-5000em;` ~~~ a { display: inline-block; text-indent: -5000em; } ~~~ 將元素高度設置為0,使用內邊距將盒子撐開，給盒子使用`overflow:hidden;`將文字隱藏 ~~~ .box { width: 300px; height: 0; padding-top: 100px; overflow: hidden; background: red; } ~~~ ## 圖片與文字垂直對齊 ~~~ vertical-align : baseline |top |middle |bottom ~~~ 基線, 頂部, 中間, 底部 vertical-align 不影響塊級元素中的內容對齊，它只針對于行內元素或者行內塊元素，特別是行內塊元素，通常用來控制圖片和表單等。對于塊元素無效行內塊元素 `vertical-align:middle;`文字與圖片垂直居中對齊 `vertical-align`對`inline-block`最敏感。默認屬性是:`vertical-align:baseline;` ~~~ img { vertical-align: middle; } ~~~ ![](https://img.kancloud.cn/7c/a7/7ca7f20e58a3acb6629da12d64d61d3e_1790x966.png) # 文本的裝飾 text-decoration 通常我們用于給鏈接修改裝飾效果 | 值 | 描述 | | ------------ | ----------------------- | | none | 默認。定義標準的文本。 | | underline | 定義文本下的一條線。下劃線也是我們鏈接自帶的 | | overline | 定義文本上的一條線。 | | line-through | 定義穿過文本下的一條線。 | ~~~ text-decoration: none; /* 取消下劃線文本裝飾 */ ~~~ # 行高 line-height ## 瀏覽器默認文字大小瀏覽器默文字大小為16px 行高=文字大小+上邊距+下邊距 ![](https://box.kancloud.cn/439a6fe1352d3e987852ad69f374dac4_664x214.png) ## 行高的定義行高指的是文本基線與基線的距離 ![](https://box.kancloud.cn/373ce1062052d12ffeecd93d0efc3ab9_650x355.png) ## 行高的作用當文字行高與父容器的高度一樣的時候，文字垂直居中對齊 ~~~ div{ height:100px; line-height:100px; } ~~~ ## 行高的單位問題 ![](https://box.kancloud.cn/d04970d2847e644ddfee7b6d5e6eb281_612x464.png) ![](https://box.kancloud.cn/7239d34f0ef1a91f059c7cb53f13170d_610x155.png) # 凹凸文字 ~~~css <head> <meta charset="utf-8"> <style> body { background-color: #ccc; } div { color: #ccc; font: 700 80px "微軟雅黑"; } div:first-child { /* text-shadow: 水平位置垂直位置模糊距離陰影顏色; */ text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; } div:last-child { /* text-shadow: 水平位置垂直位置模糊距離陰影顏色; */ text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; } </style> </head> <body> <div>我是凸起的文字</div> <div>我是凹下的文字</div> </body> ~~~ ![](https://img.kancloud.cn/c2/9f/c29f2a4dd9287d0a27fe78665e6d9464_763x205.png) # 溢出文字隱藏 ## word-break:自動換行主要處理英文單詞 * normal 使用瀏覽器默認的換行規則。 * break-all 允許在單詞內換行。 * keep-all 只能在半角空格或連字符處換行。 ~~~ <style> div { width: 120px; height: 20px; border: 1px solid #f00; word-break: keep-all; } </style> </head> <body> <div> my name is andy </div> </body> ~~~ ## text-overflow 文字溢出 ~~~ text-overflow : clip | ellipsis ~~~ 設置或檢索是否使用一個省略標記（…）標示對象內文本的溢出 * clip : 　不顯示省略標記（…），而是簡單的裁切 * ellipsis : 　當對象內文本溢出時顯示省略標記（…） # 字體圖標圖片是有諸多優點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的”http請求”，這都會大大降低網頁的性能的。更重要的是圖片不能很好的進行“縮放”，因為圖片放大和縮小會失真。我們后面會學習移動端響應式，很多情況下希望我們的圖標是可以縮放的。此時，一個非常重要的技術出現了，這就是字體圖標（iconfont). **字體圖標優點** ~~~ 可以做出跟圖片一樣可以做的事情,改變透明度、旋轉度，等.. 但是本質其實是文字，可以很隨意的改變顏色、產生陰影、透明效果等等... 本身體積更小，但攜帶的信息并沒有削減。幾乎支持所有的瀏覽器移動端設備必備良藥... ~~~ 當UI設計人員給我們svg文件的時候，我們需要轉換成我們頁面能使用的字體文件，而且需要生成的是兼容性的適合各個瀏覽器的。 ? 推薦網站：[http://icomoon.io](http://icomoon.io) **icomoon字庫** IcoMoon成立于2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。推薦網站：[http://www.iconfont.cn/](http://www.iconfont.cn/) **阿里icon font字庫** [http://www.iconfont.cn/](http://www.iconfont.cn/) 這個是阿里媽媽M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可以使用AI制作圖標上傳生成。 **使用** 第一步：引入項目下面生成的fontclass代碼： ~~~ <link rel="stylesheet" type="text/CSS" href="./iconfont.CSS"> ~~~ 第二步：挑選相應圖標并獲取類名，應用于頁面： ~~~ <i class="iconfont icon-xxx"></i> ~~~ ## 字體引入html 得到壓縮包之后，最后一步，是最重要的一步了，就是字體文件已經有了，我們需要引入到我們頁面中。首先把文件放入到 fonts文件夾里面。通俗的做法第一步：在樣式里面聲明字體：告訴別人我們自己定義的字體 ~~~ @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; } ~~~ 第二步：給盒子使用字體 ~~~ span { font-family: "icomoon"; } ~~~ 第三步：盒子里面添加結構 ~~~ span::before { /* 對應網站上圖標的這個 */ content: "\e900"; } 或者  <span>?</span> ~~~ # 文本一行顯示出現滾動條 ~~~ p { white-space: nowrap; } ~~~ 超出省略號顯示 ~~~ p { white-space: nowrap; /* 超出元素默認寬度隱藏 */ overflow: hidden; /* 使用省略號代表有內容未顯示 */ text-overflow: ellipsis; } ~~~ # 多行文本溢出異常 ~~~ -webkit-line-clamp; 用該屬性來限定塊元素內文本顯示的行數 display: -webkit-box; 將對象作為彈性的伸縮盒子顯示 -webkit-box-orient; 設置伸縮盒子對象內子對象的排列方式 text-overflow: ellipse;使用省略號告訴用戶有內容沒顯示 overflow:hidden; 超出部分隱藏 ~~~ 超出2行, 省略號顯示 ~~~ p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } ~~~ 通用方法 ~~~ p { height: 30px; line-height: 2em; border: 1px solid red; position: relative; overflow: hidden; } p::after { content: "..."; position: absolute; right: 0px; bottom: 0px; padding: 0px 0px 0px 10px; background: #fff; } ~~~