首頁 web前端 css教學 css裡的font文字怎麼設定

css裡的font文字怎麼設定

Dec 01, 2017 pm 02:56 PM
css font

說到font屬性大家想到的一定是文字,那麼這篇文章就帶大家好好的認識CSS對於文字的設置,或者說對於文字樣式設置的學習。

CSS可以設定文字的樣式css font有哪些

font文字目錄

CSS 文字的大小

文字的顏色

DIV CSS文字的底線

DIV CSS文字的間隔

CSS 文字的字型

文字的上下行間距

CSS 字型樣式(斜體)

CSS 字加粗方式

DIV+CSS英文字、字母大小寫

DIV+Css開發中設定字體常用css屬性單字英文css font-可進入CSS手冊看更詳細CSS 文字知識
font、font-family(字體)、font-size(字大小)、font-style(字樣式)、font-weight(css加粗)、text-decoration(底線)、font-variant(字母大小寫)、text-transform(英文大小寫)、letter-spacing(間隔)

接下來,我們一一實例講解透過css文字控制方法

一、字體大小使用到font-size 

首先設定了font-size的值為36px,則下面結果顯示字體比較大。

二、文字的顏色 

文字顏色使用css color顏色屬性透過color更樣式值設定文字樣式的顏色為紅色

三、Css來控製文字的底線方法css font,用到text-decoration

text-decoration可以進css手冊了解對應值,你可能還希望了解css鏈接,css超鏈接樣式、css下劃線


四、文字的間隔-進入詳細的CSS 字間距了解

五、文字的字體-用到css樣式屬性font-family

一般font-family字體可以跟常見的“宋體”,“新宋體”,“黑體”,注意的是不能自己設置不參加的字體樣式,雖然在自己電腦上可能自己設置字體能表現出了,但是一般電腦用戶都沒有添加字體的,所以在這裡字體只能設定常見,系統自帶的字體,而不能設定自己安裝的字體,中文字體轉Unicode編碼。
電腦自帶字體,和常設置文字字體有黑體、新宋體、宋體、Arial, Helvetica, sans-serif等

六、文字的上下行間距 

#上下行距使用到css文字設定單字line-height,這裡設定line-height:50px;


可以看到示範css font文字區「我是被css控製文字樣式演示。也許你需要了解br和p的差別。

七、字體樣式(斜體)

文字斜體使用到css樣式中font-style標籤設定如font-style: italic,當然可以使用標籤將文字變為斜體


八、字加粗方式

文字加粗可以直接對需要加粗文字前加文字後加來實現,對文字的加粗,這裡你可以用css來控制對文字加粗。這裡用到font-weight來設定如font-weight:bold;


這裡font-weight的值可以是100-900不等的方式為值,值越大字體越粗,若值為bold則為正常加粗,同使用b或strong一致效果,b與strong加粗區別。

九、英文字、字母大小寫css font

使用css中font-variant字母全大小,如font-variant:small-caps;,選擇性大小寫text-transform如text-transform:capitalize;開頭首字母大寫。


text-transform語法text-transform : none | capitalize | uppercase | lowercase 
參數:
none :  無轉換發生
capitalize :  將每一個  將每單字的第一個字母轉換成大寫,其餘無轉換發生
uppercase :  轉換成大寫
lowercase :  轉換成小寫

font-variant語法font-variant : normal | small-caps

參數:

normal : 正常的字體
small-caps : 小型的大寫字母字體


相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

 Css3中的transform 漸層屬性怎麼使用

css中常見的單位的總結

如何用CSS3屬性選擇器取代JS的作用

#

以上是css裡的font文字怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

See all articles