css font-family屬性設置元素的字體

2020-12-11 國哥筆記

font-family屬性定義及用法

在css中,font-family屬性是使用來規定元素的字體系列,把多個字體名稱作為一個「回退」系統來保存,如果瀏覽器不支持第一個字體,則會嘗試下一個。也就是說,font-family 屬性的值是用於某個元素的字體族名稱或/及類族名稱的一個優先表,瀏覽器會使用它可識別的第一個值。

有兩種類型的字體系列名稱:

指定的系列名稱:具體字體的名稱,比如:"times"、"courier"、"arial"。通常字體系列名稱:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"語法格式:

css語法:font-family:字體1,字體2,...;JavaScript 語法:object.style.fontFamily="arial,sans-serif"使用某種特定的字體系列(Geneva)完全取決於用戶機器上該字體系列是否可用,這個屬性沒有指示任何字體下載。因此,強烈推薦使用一個通用字體系列名作為後路。

實例:

<!DOCTYPE html><html><head><meta charset="utf-8" />

<title>css font-family屬性設置元素的字體</title>

<style type="text/css">

p.serif{font-family:"Times New Roman",Times,serif;}

p.sansserif{font-family:Arial,Helvetica,sans-serif;}

</style></head><body><h1>font-family</h1>

<p>這裡是「Times New Roman」字體</p>

<p>這裡是 「Arial」字體</p>

</body></html>

運行結果:

font-family屬性

相關焦點

  • CSS樣式--字體屬性和文本屬性
    font字體屬性css樣式中,字體屬性有以下幾種:p{    font-size:50px; /*字體大小*/    line-height: 30px; /*行高*/1、字號、行高、字體三大屬性:(1)字號: font-size:14px;(2)行高: line-height:24px;(3)字體:(font-family就是「字體」,family是「家庭」的意思) font-family:"宋體
  • css line-height屬性設置行高
    line-height屬性定義及用法在css中,line-height屬性是使用來設置行高,即設置行間的距離。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離;line-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。
  • CSS字體,從Level 1到Level 3
    其算法要求UA(User Agent,用戶代理)對給定元素中的字符逐個查找匹配的CSS屬性,首先嘗試匹配font-style,比如italic和oblique。相對值有larger和smaller關鍵字,取決於父元素文本大小的絕對值。不允許負值。最後,font是以上所有屬性的簡寫屬性,可以同時設置font-style、font-variant、font-weight、font-size、line-height和font-family。這個屬性借鑑了傳統排版中的同時設置多個屬性的簡寫法。
  • web前端學習路線css屬性
    下面來給大家講講css相關知識:學習目標· 1、css屬性和屬性值的定義· 2、css文本屬性· 3、css列表屬性· 4、css背景屬性· 5、css邊框屬性· 6、css浮動屬性一、css屬性和屬性值的定義屬性:屬性是指定選擇符所具有的屬性,它是css的核心,css2共有150多個屬性屬性值:屬性值包括法定屬性值及常見的數值加單位,如25px,或顏色值等。
  • CSS樣式更改——字體設置Font&邊框Border
    1.字體設置Font1).字體系列<div style='font-family: sans-serif normal'></div>可用字體:SerifSans-serifMonospaceCursiveFantasyTimesCourier2).字體風格<
  • CSS中常用的字體樣式屬性
    font-size:設置文本的字體大小選擇器:{font-size:15px;}此屬性可以使用相對長度單位,也可以使用絕對長度單位。二者之間相對長度單位比較常用,相對長度種px(像素)單位使用較多。字體大小儘量使用雙數,因為單數情況下ie6等老式瀏覽器可能會出bug font-family:設置文本的字體樣式選擇器{font-family:"微軟雅黑",「宋體」,arial;}
  • 深入理解CSS:font metrics, line-height 以及 vertical-align
    懷疑是知識的鑰匙來源:http://zcfy.baomitu.com/article/deep-dive-css-font-metrics-line-height-and-vertical-align-vincent-de-oliveira-2616.html原文:http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
  • 【教程】html+css零基礎入門教程(九)
    CSS文字 - font 屬性CSS 字體屬性定義文本的字體系列、大小、加粗、風格(如斜體)和變形(如小型大寫字母)。font 簡寫屬性 在一個聲明中設置所有字體屬性。這個簡寫屬性用於一次設置元素字體的兩個或更多方面。使用 icon 等關鍵字可以適當地設置元素的字體,使之與用戶計算機環境中的某個方面一致。
  • CSS 字體新玩法之彩色字體
    示例:h1 {    font-family: Segoe UI Emojil    font-palette: light}自定義字體配色:@font-palette-values@font-palette-values用於定義指定字體的配色規則。
  • Web前端學習第20課,如何為HTML元素編寫CSS樣式表
    本節課主要有關CSS兩個方面的問題:css樣式規則怎麼寫以及寫在哪裡的問題。1.CSS的寫法規則CSS 寫法規則由兩部分構成:選擇器,以及一條或多條屬性聲明。選擇器是您需要設置樣式的 HTML 元素。每條聲明由屬性和值組成。
  • CSS font關鍵字屬性值的簡單研究
    /一、font關鍵字初窺初探我們使用font屬性,多半用做縮寫,例如:.font { font: 14px simsun; }其語法如下:[ [  ||  ||  ]?  但是呢,我估計絕大多數小夥伴都不知道,font屬性還支持關鍵字值,如下語法示意:font:caption | icon | menu | message-box | small-caption | status-bar如果你設置font屬性為上面中的一個值,就等同於設置font為作業系統該部件對應的font,也就是說直接使用系統字體。
  • CSS入門
    --行內樣式:在標籤元素中,編寫一個style屬性,再寫上樣式, 一般不建議這樣寫--><h1 style="color: aquamarine">hello world!</h1></body>2.內部樣式<!
  • 《圖解CSS》字體與文本
    •文本就是一組字或字符,比如章標題、段落正文等等,跟使用什麼字體無關。•CSS 為字體和文本分別定義了屬性。字體屬性主要描述一類字體的大小和外觀。比如,使用什麼字體族(是 Times,還是 Helvitica),多大字號,粗體還是斜體。文本屬性描述對文本的處理方式。比如,行高或者字符間距多大,有沒有下劃線和縮進。
  • CSS新手閱讀的CSS技巧十則
    一、CSS字體屬性簡寫規則一般用CSS設定字體屬性方法:font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height
  • 從零開始寫代碼(九),CSS選擇器以及一些屬性
    Hello,今天繼續學習的是常用到的css選擇器的一些類型,包括裡面用到的屬性,又到了像是學英語單詞的時候,還是那句話,雖然這些東西都可以在用的時候去查,但是作為一個合格的程式設計師,怎麼能邊寫代碼邊查呢!
  • css padding屬性設置元素內邊距
    padding屬性定義及用法在css中,padding屬性是一個簡寫屬性,用來設置所有內邊距屬性(填充),將上邊距屬性、右邊距屬性、下邊距屬性、左邊距屬性定義在同一個聲明中。,比如像素、釐米等(默認為0px);%:規定基於父元素的寬度的百分比的內邊距;inherit:從父元素繼承padding屬性的值;實例:<!
  • 前端開發必備的CSS命名規範與常用CSS代碼集合
    一、規則說明1)、所有的命名最好採用一種命名規範,比方全部小寫或者駝峰命名2)、屬性的值一定要用雙引號("")括起來,且一定要有值,例如class="web",id="web"3)、每個標籤都要有開始和結束,且要有正確的層次,排版有規律工整4)、表現與結構一定分離,代碼中不涉及任何的表現元素,如style、font、bgColor、border
  • css3必須了解的知識 css中常見的樣式屬性和值
    css中常見的樣式屬性和值字體與顏色背景屬性文本屬性邊框屬性>浮動和清除浮動滾動條樣式顯示和隱藏字體與顏色font-family:微軟雅黑;/*字體名稱(類型):微軟雅黑,黑體,楷體,宋體*/>font-size: 20px;/*字體大小*/font-weight: 600;/*字體加粗*/font-style: italic;/*字體樣式*/背景屬性background: #00FF00 url
  • css max-height屬性設置元素最大高度
    max-height屬性定義及用法在css中,max-height屬性是使用來設置元素的最大高度,就是元素達到最大高度後,不會隨元素內容的增加而增加。該屬性設置的最大高度不包括填充,邊框,或頁邊距。max-height屬性用的不是很多,一般用該屬性都是為了防止元素內容太多把高度撐的太高而影響布局效果,設置最大高度之後,就不會因為元素內容太多將高度撐的太高而影響整體的布局。
  • CSS font關鍵字屬性值
    屬性,多半用做縮寫,例如:.font { font: 14px simsun; }其語法如下:[ [  ||  ||  ]?  但是呢,我估計絕大多數小夥伴都不知道,font屬性還支持關鍵字值,如下語法示意:font:caption | icon | menu | message-box | small-caption | status-bar如果你設置font屬性為上面中的一個值,就等同於設置font為作業系統該部件對應的font,也就是說直接使用系統字體。