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

2020-12-08 國哥筆記

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-family文本大小 font-size文本粗細 font-weight--查看瀏覽器是否有Verdana字體,如果有應有在boby元素上,如果沒有再查找Geneva字體,如沒有再查找Arial,如沒有使用sans-serif字體應用在BOBY元素上,根據指令字體的先後順序來選擇應用在BOBY元素上的字體-->指定在線字體@font-face {font-family
  • Meta CSS框架發布
    :center;}.c0,a.c0{color: #000; font-family:Arial;}.c6,a.c6{color:#666; font-family:Arial; /* 一段摘抄自163.com的css代碼 *//* Font  */.fB {font-weight: bold;}.f12px{
  • CSS基礎—文字的尺寸、字體、行距及顏色
    文字的尺寸、字體、行距及顏色樣式標籤為font-size(尺寸)、font-family(字體)、line-height(行距)、color(顏色)。假設當前元素的父元素的font-size設置為16px,如果當前元素的font-size設置為1.2em,則當前元素的font-size實際值為16*1.2=19.2px;如果當前元素的font-size設置為0.65em,則當前元素的font-size實際值為16*0.65=10.4px。
  • 全面掌握CSS基本知識點
    拓展知識點 margin屬性:行內元素是沒有上下外邊距的,只有左右外邊距,所以儘量不要設置行內元素的內外上下邊距,設計寬高也是無效的兩個相鄰的塊級元素一個設置了margin-bottom、另一個設置margin-top的時候,會發生外邊距塌陷。兩個元素之間的margin值會合併,margin值最終取較大值。
  • 前端Web開發人員的CSS相對字體大小
    在本文中,我們將看幾種不同的方式,前端Web開發人員可以使用CSS操作其網頁的字體。網頁設計中最大的混亂之一是由font-size屬性造成的。在CSS中,可以使用多個單元,這只會導致設計人員額外頭痛。在本文中,我們將闡明這些單位的用法和任何誤解。PX Unit最常見和最受歡迎的單位是像素(像素)單位。
  • CSS教程:網頁字體及字體大小的設計
    字體大小CSS2規範根據長度——水平和垂直尺寸——來定義字體。這個長度為一個數值,前面可能帶一個可選的加(+)或減(-)標記符。另外,該數值後可能有一個可選的單位標識符。另外,CSS2規範定義了兩個單位類型:絕對單位和相對單位。
  • CSS之定位一(position屬性)
    本文我們討論涉及定位的position屬性。首先我們來看一下position對應的值及其含義(表1)。圖1:relative子元素位置變化圖1中外框和除position屬性值不一樣外,其他css屬性均一致,其內外框html和相同部分css見圖2。
  • CSS常考知識點
    2.2 布局常用單位面試官:請列舉一下我們css布局常用的單位及區別(基礎題)px:絕對單位,頁面按精確像素展示%:相對單位,根據父容器進行百分比計算em:相對單位,基準點為父節點字體的大小,如果自身定義了font-size
  • HTML5+CSS+JS時間
    /css/page.css"type="text/css"rel="stylesheet"></head><body><divclass="Scanner"><h2>博客頁面登錄系統</h2><form><!
  • UI設計CSS網頁基本單位知多少?奇酷學院告訴你
    2.em相對長度單位,參考對象是父元素的font-size,具有繼承的特點,如果當前行內文本的字體尺寸未被設置,瀏覽器使用默認字體尺寸(16px),整個頁面內1em也不是一個固定的值。3.%一般寬泛的講是相對於父元素,但是並不是絕對的。
  • 360網站衛士推出google字體加速方案
    WordPress是世界上最大的開源博客程序,而WordPress大部分的主題都在使用Google的在線字體方案——Google Fonts,Google服務一不穩定,大量的獨立博客字體就加載不出來,直接導致了幾十萬獨立博客打開速度令人無法忍受,嚴重的時候會導致網站打不開。
  • 如何用純css打造類materialUI的按鈕點擊動畫並封裝成react組件
    原理這個動效的原理其實也很簡單,就是利用css3的transition過渡動畫,配合::after偽對象就可以實現,點擊的時候由於元素會激活:active偽類, 然後我們基於這個偽類, 在::after偽對象上做背景的動畫即可.
  • 學習CSS了解單位em和px的區別
    平時都是用px來定義字體,所以無法用瀏覽器字體放大的功能,而國外大多數網站都可以在IE下使用。因為1、IE無法調整那些使用px作為單位的字體大小;2、國外的大部分網站能夠調整的原因在於其使用了em作為字體單位;3、Firefox能夠調整px和em,但是96%以上的中國網民使用IE瀏覽器(或內核)。px像素(Pixel)。相對長度單位。
  • HTML+CSS:css定位詳解之相對定位、絕對定位和固定定位
    本篇文章我們主要給大家說一下css的定位。css的定位是我們以後網頁製作中比較常用的屬性,也是很重要的知識點。了解各個定位的作用以及層級關係對以後的頁面布局至關重要。css定位主要有四種,靜態定位、相對定位、絕對定位和固定定位。其中靜態定位這個是元素的默認定位方式,不能使用top,bottom,left,right和z-index屬性,其它三種定位可以使用以上幾個屬性。我們這裡主要介紹後邊的這三個定位。
  • 前端工程化(ES6模塊化和webpack打包css,less,scss,圖片,字體...
    */ 設置Webpack的打包入口/出口/* 在webpack 4.x中./src/xx.js"), //設置出口文件 output:{ //設置輸出文件路徑 path:path.join(__dirname,".
  • CSS位置:相對於位置絕對
    正如名稱所述,CSS 位置屬性定義元素在網頁上的位置。定位有幾種類型:靜態,相對,絕對,固定,粘性,初始和繼承。首先,讓我們來解釋所有這些類型的含義。靜態 - 這是默認值,所有元素按照它們在文檔中出現的順序排列。
  • 什麼是css,css選擇器簡介
    什麼是csshtml頁面中引入css的方式1、內聯樣式:在標籤的style屬性中引入標籤引入外部css樣式文件,可多頁面復用,推薦工作中使用,需要單獨創建樣式文件<link rel="stylesheet" href="first.css">優先級(多種引入方式操作同一個標籤,以哪個為準)