首頁 > 開發者 > CSS

CSS3--如何給文字增加字型和顏色樣式

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這一章能夠讓你網頁中的文字變得更漂亮

關於文字的一些屬性

  • font-family：文字字型

  • font-size:文字大小

  • color:文字顏色

  • font-weight:文字粗細

  • text-decoration:文本的更多風格

font-family(字型系列)

一共有五個系列：sans-serif（無襯線）、serif（有襯線）、monospace（等寬）、cursive（草書。。。這是本意）、fantasy（幻想？）看右圖

在CSS中font-family怎麼工作

body {font-family: Verdana, Geneva, Arial, sans-serif;}
在客戶的電腦中尋找有沒有Verdana，如果有就用Verdana顯示文字，如果沒有，就尋找有沒有Geneva，如果還沒有就尋找Arial，如果還是沒有就找找客戶機中有沒有sans-serif的字型（一般每一個電腦都有sans-serif的字型的，注意：sans-serif不是一個特定的字型）如果那個字型名是含有空格的，可以把那個名字兩邊加上引號，像這樣：font-family:"Courier New", Courier;

如果我真的很希望使用者可以使用我指定的字型，而我不知道使用者有沒有這個字型

Web字型登場！

使用方法

  1. 找到一個字型檔：尾碼名有woff、svg、eot、otf、ttf

  2. 將這個字型放在web上，可以使用Google的字型託管服務，這個是免費的

  3. 在CSS中增加@font-face屬性

    @font-face {font-family:"Emblema One";src:url("www.某網站.com");}/*那個網址就是字型URL */

    這個時候就相當於在使用者機上建立了名為Emblema One的字型了

  4. 像本地字型一樣使用，注意使用字型的地方要在@font-family之後

這樣做的缺點是載入字型會花費一點時間，所以客戶第一次訪問你的網站而他又沒有這個字型就會花一點時間

調節字型大小

有三種字型單位：px(像素)、%、em（就是倍數，em=%除以100） 
h1 {font-size:220%;}
還有一種指定字型大小的方法——關鍵字（xx-small、x-small、small、medium、large、x-large、xx-large）每一個關鍵字所表示的大小都不一定的，這個和用戶端有關係

那麼，我到底應該怎麼指定文字的大小呢

首先，可以通過關鍵字先定義好<body>的文字大小，通過關鍵字可以得到客戶機那邊預設的大小，這個一般的他那邊常用的大小之後，使用百分數或em，可以相對於<body>的文字大小來調整其他文字的大小（比如說一級標題），這裡不建議使用px像素表示字型大小，雖然這樣你能夠準確的決定文字的大小但是在老版本的IE瀏覽器中將會不支援縮放

改變字型粗細

有五個關鍵字的大小，分別是：bold（粗體）、bolder（更粗一點）、inherit（繼承上一級的粗細）、lighter（細一點）、normal（普通）還有一種把font-weight設定成100到900之間的一個數（100的倍數）

為字型增加風格

有四種：inherit（繼承老爸）、italic（斜體）、normal（普通）、oblique（傾斜的）italic和oblique的區別在於，前者是使用這個字型的斜體，顯示方式是在字型檔中的，後者是直接把正正的字弄斜了。。。不過好像也差不多

顏色

Demo設定<body>的顏色 
body {background-color:red;background-color:rgb(80%, 40%, 0%);background-color:rgb(204, 102, 0);background-color:#66ccff;}
這是四種設定顏色的方法，第一種是關鍵字，這個一般是小學生在用的吧，支援的顏色不多第二種是使用rgb（red、green、blue）百分比，那些百分比意思是依次是紅/綠/藍的量（怎麼說呢，越大就越含有這個顏色）第三種和第二種相似，只不過從0%~100%改成了0~255最後一種是十六進位碼，意思是：前兩個代表紅的十六進位、中間兩個是綠的、最後兩個是藍的把十六進位轉成10機制就變成了第三種設定顏色的方法了

對於文本和背景，要使用對比比較大的顏色，這樣可讀性才好













文本裝飾（text-decoration）

不多說，直接看效果：blink inherit line-through none overline underline

BULLET POINTS

  • CSS提供了很多屬性對字型的外觀加以控制，包括font-family、font-weight、font-size、font-style等

  • font-family是一組有共同特徵的字型

  • 用於Web的字型系列包括serif、sans-serif、monospace、cursive、fantasy。serif和sans-serif最為常用

  • 訪問者在你的web頁面上看到的字型取決於他們自己的電腦上安裝了哪些字型，除非你使用web字型

  • 在font-family CSS屬性中指定候選字型是一個好主意，以防使用者沒有安裝你的首選字型

  • 最後一個字型要為一個通用字型，如serif或sans-serif，這樣一來，如果找不到其他字型，瀏覽器可以替換適當的字型

  • 如果你要使用某種字型，而預設情況下使用者可能沒有安裝這種字型，你就可以使用@font-face規則

  • 字型大小通常是關鍵字、像素px、百分比、em指定

  • 如果使用像素來指定字型大小，就是在告訴瀏覽器字母高度是多少像素

  • em和%是相對字型大小，所以使用em和%指定字型大小時，就意味著字型大小要相對於其父元素的字型大小來確定

  • 使用相對字型大小可以讓你的頁面更可維護

  • 在body規則中使用字型大小關鍵字來設定基本的字型大小，這樣如果使用者希望文本更大或更小，所有瀏覽器就能按比例縮放字型大小了

  • 可以使用font-weight CSS屬性設定文本為粗體

  • font-style屬性用於建立斜體或傾斜文本。斜體或傾斜文本是傾斜的

  • web顏色是混合不同數量的紅、綠、藍色得到的

  • 如果混合紅色100%，綠色100%，藍色100%就可以得到白色，全部為0%就是黑色

  • CSS中有16個基本顏色，及150多個拓展顏色

  • 可以使用紅、綠、藍百分比指定你想要的顏色，也可以使用數值（0~255），或者16進位碼

  • 要找到你想要的顏色的十六進位碼可以使用圖片編輯應用的顏色選擇工具

  • 表示顏色的十六進位碼有6位，每一位取指為0~F，前兩個表示紅色的數量、中間兩個是綠色的、最後兩個是藍色的

  • 可以使用text-decoration屬性為為本建立一個底線。有底線的文檔通常會被使用者誤以為是連結文本，所以要謹慎使用這個屬性

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css3 pdf css3 transition css3 text animation effects css3 missing manual css3 background image css3 animated buttons html5 css3 templates dreamweaver
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More