《圖解CSS》字體與文本

2021-03-02 前端微說
字體與文本

•字體是「文字的不同體式」或者「字的形體結構」,例如宋體/黑體/行楷等。•文本就是一組字或字符,比如章標題、段落正文等等,跟使用什麼字體無關。•CSS 為字體和文本分別定義了屬性。字體屬性主要描述一類字體的大小和外觀。比如,使用什麼字體族(是 Times,還是 Helvitica),多大字號,粗體還是斜體。文本屬性描述對文本的處理方式。比如,行高或者字符間距多大,有沒有下劃線和縮進。

字體

網頁中的字體有三個來源:

•用戶機器中安裝的字體•保存在第三方網站上的字體。最常見的是 Typekit 和 Google,可以使用 link 標籤把它們連結到你的頁面上•保存在你的 Web 伺服器上的字體。這些字體可以使用@font-face 規則隨網頁一起發送給瀏覽器

字體的屬性

•font-family•font-size•font-style•font-weight•font-variant•font(簡寫屬性)

字體族

font-family:用於設定元素中的文本使用什麼字體 注意: 如果字體系列的名稱超過一個字,它必須用引號,如Font Family:"宋體"。

字體大小

font-size:用於設置字體的大小

絕對字體大小

使用像素(px),派卡(pica)或者英寸。設定絕對字體大小時,也可以使用關鍵字值,比如 x-small、medium、x-large,等等。

相對字體大小

使用百分比、em 或 rem(根元素的字體大小)設定字體大小。如果你給某個元素設定了相對字體大小,則該元素的字體大小要相對於最近的「被設定過字 體大小的」祖先元素來確定

字體的樣式

值:italic、oblique、normal。示例:h2 {font-style:italic;}

字體的粗細

可能的值:100、200……900,或者 lighter、normal、bold 和 bolder。示例:a {font-weight:bold;}

字體的變化

值:small-caps、normal。示例:blockquote {font-variant:small-caps;}。這個值會導致所有小寫英文字母變成大寫字母。

簡寫字體屬性

規則一:必須聲明 font-size 和 font-family 的值。規則二:所有值必須按如下順序聲明。

1.font-weight、font-style、font-variant 不分先後;2.然後是 font-size;3.最後是 font-family。

示例 p {font: bold italic small-caps .9em helvetica, arial, sans-serif;}

示例

文本文本屬性text-indent(文本縮進)

值:長度值(正、負均可)。示例:p {text-indent:3em;}。

letter-spacing(字符間距)

值:任何長度值(正、負值均可)。示例:p {letter-spacing:.2em;}。

word-spacing(單詞間距)

值:任何長度值(正、負值均可)。示例:p {word-spacing:.2em;}。

text-decoration(文本裝飾)

值:underline、overline、line-through、blink、none。示例:.retailprice {text-decoration:line-through;}。

text-align(文本對齊)

值:left、right、center、justify。示例:p {text-align:right;}。

line-height(行高)

值:任何數字值(不用指定單位)。示例:p {line-height:1.5;}

text-transform(文本轉換)

值:none、uppercase、lowercase、capitalize。示例:p {text-transform:capitalize;}。

vertical-align(垂直對齊)

值:任意長度值以及 sub、super、top、middle、bottom 等。示例:span {vertical-align:60%;}。

示例

如果文章能夠對您有所幫助,我便感到十分榮幸。如若文章能被您點讚,那便是萬分榮幸~

相關焦點

  • CSS樣式--字體屬性和文本屬性
    如何讓單行文本垂直居中小技巧:如果一段文本只有一行,如果此時設置行高 = 盒子高,就可以保證單行文本垂直居中。這個很好理解。上面這個小技巧,只適用於單行文本垂直居中,不適用於多行。如果想讓多行文本垂直居中,還需要計算盒子的padding。計算方式如下:
  • CSS的字體和排版
    字體當你寫代碼的時候,可以用「monospace」字體;So cursive is meant to be handwritten style of fonts.  cursive:手寫體;fantasy:外星字體;
  • css font-family屬性設置元素的字體
    font-family屬性定義及用法在css中,font-family屬性是使用來規定元素的字體系列,把多個字體名稱作為一個「回退」系統來保存,如果瀏覽器不支持第一個字體,則會嘗試下一個。有兩種類型的字體系列名稱:指定的系列名稱:具體字體的名稱,比如:"times"、"courier"、"arial"。
  • CSS 字體新玩法之彩色字體
    Playbox by Matt Lyon什麼是彩色字體(Color Font)初識彩色字體在我們所熟知的傳統字體中,字體文件本身僅僅描述了字體的外形特徵,這些特徵一般包含著矢量的輪廓數據或是單色調位圖數據。在瀏覽器渲染單色字體時,渲染引擎使用設定的字體顏色填充字形區域,最後繪製出對應文字及其設定的顏色。
  • CSS字體,從Level 1到Level 3
    相對值有larger和smaller關鍵字,取決於父元素文本大小的絕對值。不允許負值。最後,font是以上所有屬性的簡寫屬性,可以同時設置font-style、font-variant、font-weight、font-size、line-height和font-family。這個屬性借鑑了傳統排版中的同時設置多個屬性的簡寫法。
  • 【教程】html+css零基礎入門教程(九)
    CSS文字 - font 屬性CSS 字體屬性定義文本的字體系列、大小、加粗、風格(如斜體)和變形(如小型大寫字母)。font 簡寫屬性 在一個聲明中設置所有字體屬性。這個簡寫屬性用於一次設置元素字體的兩個或更多方面。使用 icon 等關鍵字可以適當地設置元素的字體,使之與用戶計算機環境中的某個方面一致。
  • CSS入門
    -- <link rel="stylesheet" href="style.css"> 導入css文件--> <link rel="stylesheet" href="style.css"></head><body><h1>hello world!
  • 關於某點評網站的字體加密以及 CSS 加密
    破解大眾點評的加密某網站的店鋪列表頁以及詳情頁和評論頁的加密不一樣店鋪列表頁的加密為字體加密,打開網頁原始碼就可以看到顯示的都是 &#x**** 這種類型的數據。所以只要找到字體文件。在右上角的css 文件點擊,就會進入到該 css 文件。在 css 文件中就找到了這個字體文件,直接訪問就可以下載下來。需要主要的每一個 class 對應一個字體文件可以分別保存到資料庫,做相應處理。
  • (06)CSS 給文本加樣式:② 文本屬性 | CSS
    本文節選自「語雀」私有付費專欄「前端一萬小時 | 從零基礎到輕鬆就業」前言:作為上一篇《CSS 給文本加樣式:① 字體屬性》的兄弟文章,我們繼續逐一學習「文本屬性」是怎樣給文本加樣式的。首行縮進文本水平對齊(左對齊、右對齊、居中等)行高字母和字間距處理空白符其他1 對文本本身進行「小整形」1.1 轉換一下文本的大小寫text-transform 屬性用於設置要轉換的字體。
  • web前端學習路線css屬性
    下面來給大家講講css相關知識:學習目標· 1、css屬性和屬性值的定義· 2、css文本屬性· 3、css列表屬性· 4、css背景屬性· 5、css邊框屬性· 6、css浮動屬性一、css屬性和屬性值的定義屬性:屬性是指定選擇符所具有的屬性,它是css的核心,css2共有150多個屬性屬性值:屬性值包括法定屬性值及常見的數值加單位,如25px,或顏色值等。
  • 層疊樣式表(CSS)屬性(上篇)
    今天我們繼續上期的話題,上期我們對層疊樣式表(css)的基礎做了下大致的介紹,那麼今天我們來學習一些它的屬性。>如下圖:內填充屬性 :邊框屬性 :外邊距屬性 :內容屬性內容屬性包括v字體屬性 v文本屬性 v背景屬性 v列表屬性 v表格屬性 v光標屬性
  • HTML+CSS:掌握css的繼承以及代碼的優先級問題
    上邊文章我們說了使用css的三種不同的選擇器,本篇文章我們主要介紹css的繼承規則以及css代碼的權重優先級問題。(1)css的繼承規則CSS的某些樣式代碼是具有繼承性的,那麼究竟什麼是繼承呢?比如下面代碼:我們設置p標籤的字體顏色為紅色並添加1像素的紅色邊框。在網頁中的顯示效果就如下圖所示:從上邊的圖片你可以看出字體顏色為紅色不僅使p標籤中的文字變成了紅色,還應用於p標籤中的所有子元素文本,這裡子元素為span標籤。但是邊框屬性並沒有應用到子元素中去。
  • CSS基礎—CSS樣式如何應用到HTML元素
    一種方式是利用HTML元素的style屬性,樣式表作為style屬性的值,該方式也稱為行內樣式;一種方式是將樣式表放置在HTML網頁文檔head標籤內,每個樣式表賦予一個名稱,然後在HTML元素中通過class屬性引入樣式表,該方式也稱為內部樣式;再一種方式是單獨將樣式表寫入到一個文件,文件的擴展名為css,然後通過HTML的link標籤連結外部樣式表文件,在HTML元素中通過class屬性引入樣式表文件中的樣式表
  • 黑馬程式設計師:css文本如何設置?
    學習目標:css 文本如何設置1、文本顏色:text-indent 屬性:例:p {background-color: gray;}默認值 none 對文本不做任何改動,將使用源文檔中的原有大小寫。顧名思義, uppercase 和 lowercase 將文本轉換為全大寫和全小寫字符。最後,capitalize 只對每個單詞的首字母大寫。
  • 網頁設計之css+div PK table+css
    首頁 > 教程 > 關鍵詞 > CSS最新資訊 > 正文 網頁設計之css+div PK table+css
  • 網頁設計HTML_CSS語言_外部樣式
    WWW_WEB_入門實踐—網頁設計HTML_CSS語言_外部樣式網頁內容與表現形式一般新聞或科技報導—文本與圖形
  • HTML+CSS常見選擇題
    face答案:B解析:font標籤中,size屬性設置字體大小,color屬性設置字體顏色,face屬性設置文字內容為什麼字體,沒有align屬性。2. 對於Internet Explorer瀏覽器,可以使用()標記將聲音添加到網頁上。A.
  • CSS中內聯元素與塊級元素
    如果沒有css的作用,塊元素會順序以每次另起一行的方式一直往下排。而有了css以後,我們可以改變這種html的默認布局模式,把塊元素擺放到你想要 的位置上去。而不是每次都愚蠢的另起一行。基於良好重構理念設計的css布局頁面源碼,至少也能讓沒有web開發經驗的普通使用者把內容快 速的讀懂。從這個角度來說,css layout code應該有更好的美學體驗吧。你能夠把塊容器元素div想像成一個個box,或者如果你玩過剪貼文載的話,那就更加容易理解了。我們先把需要的文章從各種報紙、雜誌總剪 下來。每塊剪下來的內容就是一個block。
  • 前端開發必備的CSS命名規範與常用CSS代碼集合
    ,style.css主要的module.css模塊base.css基本共用layout.css布局,版面themes.css主題columns.css專欄font.css文字、字體forms.css表單mend.css補丁print.css列印三、藉助翻譯工具如果遇到不常用的一些名稱,可以藉助翻譯工具進行翻譯取其英文命名。
  • CSS沒那麼難,入門篇(一)
    important;}常用屬性字體設置在寫文檔時,字體可設置字體樣式、字體大小、加粗、斜體、下劃線、刪除線、字體顏色,字體背景色,字體對齊方向等,CSS同樣可以設置。單位可設置px、em、%,1em等於100%等於瀏覽器默認字體,一般不設置該元素的外層元素包括body、html的font-size屬性,默認字體便為16px;還可設置字體為絕對大小值、相對大小值;加粗:font-weight,值normal(默認標準)、bold(粗)、bolder(更粗)、lighter(細)、100~900;斜體: