css常用樣式font控制字體的多種變換

来源:https://www.cnblogs.com/dhnblog/archive/2020/02/14/12309380.html

CSS 字體屬性定義文本的字體系列、大小、加粗、風格(如斜體)和變形(如小型大寫字母)font-family控制字體,由於各個電腦系統安裝的字體不盡相同,但是基本裝有黑體、宋體與微軟雅黑這三款字體,通常這樣寫font-family:"黑體", "宋體","Microsoft YaHei" font-... ...


CSS 字體屬性定義文本的字體系列、大小、加粗、風格(如斜體)和變形(如小型大寫字母)font-family控制字體,由於各個電腦系統安裝的字體不盡相同,但是基本裝有黑體、宋體與微軟雅黑這三款字體,通常這樣寫font-family:"黑體", "宋體","Microsoft YaHei"

font-size控制字體大小,我們設置字體大小是設置它的寬度,它的高度一般電腦系統預設字體大小是16px,所以字體大小儘量不要低於16px,1em=16px; font-weight: bold;/*控制字重 一般是100-900 常用lighter(細體) normal(正常)bold加粗 */至於這個font-style,一般預設是normal,也就是正常的,如果說你設置 font-style: italic;斜體話,其實和這個<em></em>的效果是差不多的;文字間的間距用的line-height如果和高度相等話,就是垂直居中了。

通常font字體的簡寫:font:style weight size/line-heigt font-family  /*要求必須出現的2個是 size與font-family*/
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>css常用樣式font字體的多種變換</title>
 7     <style>
 8         div{
 9             font-family: 'Microsoft YaHei';/*微軟雅黑*/
10             /* font-family: 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
11             /*字體加上雙引號或者單引號,當有多個字體的時候,中間逗號分開*/
12             color:#f90;
13             font-size: 24px;/*控制字體大小*/
14             font-weight: bold;/*控制字重 常用lighter(細體) normal(正常)bold加粗 */
15             font-style: italic;/*等同於em*/
16             line-height: 30px;
17         }
18         /*font字體的簡寫:font:style weight size/line-heigt font-family*/
19         /*要求必須出現的2個是 size font-family*/
20         p{  
21             font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
22             letter-spacing: 1px;/*英文字母間距*/
23             word-spacing: 10px;/*英文單詞間距*/
24         }
25         P::first-letter{
26             text-transform: capitalize;
27         }/*第一個字母::first-letter*/
28         p::first-line{
29             color:red;
30         }/*第一行::first-line*/
31     </style>
32 </head>
33 <body>
34     <div>技術為王世界,欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好技術為王世界,
35         欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好技術為王世界,
36         欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好 </div>
37     <p>Technology is king world, I want to ask if the scenery on the top of Qingtian Mountain is the king of technology, 
38         I want to ask whether the scenery of Qingtian Peak is the king of technology. If the technology is the king of the world, 
39         I would like to ask whether the scenery on the top of Qingtian Mountain is the king of the world. Is the scenery good?</p>
40 </body>
41 </html>

您的分享是我們最大的動力!

更多相關文章
  • 資料庫索引是資料庫系統中一個重要的概念,索引也叫做 key ,是一種用於提升資料庫查詢效率的數據結構,我們可以把索引理解成一本書的目錄,通過目錄我們可以快速找到對應章節的內容,同樣的,通過資料庫索引,我們可以快速找到數據表中對應的記錄。 ...
  • 上一章聊到 TsFile 的文件組成,以及數據塊的詳細介紹。詳情請見: 時序資料庫 Apache-IoTDB 源碼解析之文件數據塊(四) 打一波廣告,歡迎大家訪問IoTDB 倉庫,求一波 Star。 這一章主要想聊聊: TsFile索引塊的組成 索引塊的查詢過程 索引塊目前在做的改進項 索引塊 索引 ...
  • 簡單介紹了線性佈局和相對佈局,同時分析了xml文件三個固定開頭xmlns:namespace-prefix="namespaceURI" ...
  • 在無序列表ul>li中,無線列表的標誌是出現在各列表前面的圓點。在有序列表ol>li中,前面預設帶有數字,如何修改列表前面的項目符號,只需要通過list-style調整就好,常見的符號有(/*內容註釋部分*/)list-style-type:circle;/*空心圓*/list-style:none... ...
  • 常見的color, font-family, background 等css屬性都能夠設置鏈接的樣式,a鏈接的特殊性在於能夠根據它們所處的狀態來設置它們的樣式。a標簽與人交互的4個狀態屬於偽類狀態切換,常見的鏈接四種狀態為:a:link - 普通的、未被訪問的鏈接a:visited - 用戶已訪問的... ...
  • CSS文本屬性可定義文本的外觀,這是毫無疑問的,其次css可以通過以下屬性改變文字的排版,比方說letter-spacing實現字元間距text-indent: 2em;完成首行縮進2字元word-spacing改變了文字的間距,direction改變文本從左至右的閱讀順序,white-space處... ...
  • 對象的遍歷 對象可以當做數組處理,使用for in var person={}; person.name="cyy"; person.age=25; person.infos=function(){ alert(this.name+" "+this.age); } for(var i in pers ...
  • 前次用 electron-packager 打包成功,這次改用 electron-builder 打包,然後根據項目中實際需要進行選擇使用。 第一步:全局安裝 electron-builder,便於系統通用 npm install -g electron-builder 或 cnpm install ...
一周排行
  • 枚舉是 C 中最有意思的一部分,大部分開發人員只瞭解其中的一小部分,甚至網上絕大多數的教程也只講解了枚舉的一部分。那麼,我將通過這篇文章向大傢具體講解一下枚舉的知識。我將從大家都瞭解的部分開始講解,然後再講解大家所不知道的或者瞭解很少的部分。 零、基礎知識 枚舉是由開發人員聲明的一種 值類型 ,它在 ...
  • 一. elasticsearch on windows 1.下載地址: https://www.elastic.co/cn/downloads/elasticsearch 如果瀏覽器下載文件慢,建議使用迅雷下載,速度很快。下載版本為7.5.2 2. 修改配置文件 下載後解壓,找到config\jvm ...
  • 最近因為” 新冠” 疫情在家辦公,學習了 ASP.NET Core MVC 網站的一些知識,記錄如下。 ...
  • Regex.Replace("<!--(.|[\r\n])*?-->",string.Empty) ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7743118.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講結構型設計模式的第四個模式--組合模式。當我們談到這個模式的時候,有一個物件和這個模式很像,那就是“俄羅斯套娃”。“俄羅斯套娃”是 ...
  • 一、前言 Entity Framework(後面簡稱EF)作為微軟家的ORM,自然而然從.NET Framework延續到了.NET Core。 二、程式包管理器控制台 為了能夠在控制臺中使用命令行來操作EF,需要先安裝Microsoft.EntityFrameworkCore.Tools。 安裝 ...
  • 項目gitHub地址 點我跳轉 今天給大家帶來一個C#裡面的時間工具類,具體的直接看下麵代碼 1 using System; 2 3 namespace ToolBox.DateTimeTool 4 { 5 public static class DateTimeExtend 6 { 7 /// < ...
  • 《C# 6.0 本質論》 [作者] (美) Mark Michaelis (美) Eric Lippert[譯者] (中) 周靖 龐燕[出版] 人民郵電出版社[版次] 2017年02月 第5版[印次] 2017年02月 第1次 印刷[定價] 108.00元 【前言】 成功學習 C# 的關鍵在於,要盡 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/7772184.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講結構型設計模式的第五個模式--外觀模式。先從名字上來理解一下外觀模式,當看到“外觀”這個詞時,很容易想到“外表”這個詞語,兩者有著 ...
  • 在 C 中存在一個名叫靜態類型檢查的機制,這個機制可以讓編譯器幫助我們把類型不服的用法找出來,從而使得應用程式在運行期間加少一些類型檢查的操作。但是有時候我們還是需要進行運行期類型檢查,比如我們在設計框架時將方法的參數類型定義為 object ,那麼這時我們就有很大的可能需要將 object 類型的 ...
x