image

 

 

本篇把一些跟設定字體相關的CSS語法全部蒐集在這裡

如果有什麼疑問或是建議,都可以提供給梅花,和梅花討論交流呦!

 

1075865138180_9218.gif

此處標示紅字的語法,要定位或是更改這些語法在自己樣式裡面的位置,進到自己的CSS路徑是

右上角點自己的頭像image我的部落格後台樣式管理部落格CSS原始碼

搜尋語法的話可以按Ctrl+F搜尋即可~ 

如果梅花所提供的語法尋找名稱你怎麼樣都找不到的話請參考以下文章利用開發人員工具尋找可能的語法位置

【梅花的CSS學習】用「開發人員工具」檢視區塊語法的名稱

1075865138180_9218.gif

梅花的語法筆記

檢視CSS標籤F12 (Ctrl+Shift+I) 箭頭粉.jpeg *開發人員工具*


部落格整體 #body 箭頭粉.jpeg *換背景底圖*箭頭-15.png*換字體*箭頭-15.png*換部落格ICON*箭頭-15.png*設計LOGO* 


封面橫幅#banner/#header 箭頭粉.jpeg *換封面底圖*箭頭-15.png*部落格標題敘述大小位置*


文章區塊 #content 箭頭粉.jpeg *改文章標題字體、背景*


公告版面 #spotlight 箭頭粉.jpeg *公告版面應用*


側欄區塊 #links 箭頭粉.jpeg *改側欄標題的背景*箭頭-15.png*Facebook粉專外掛image箭頭-15.png*音樂外掛image箭頭-15.png*YouTube外掛image箭頭-15.png*分享連結階層*


實用推薦 箭頭粉.jpeg *看所有語法筆記文章*箭頭-15.png0074.gif梅花的語法筆記本0074.gif箭頭-15.png*看梅花的CSS標籤筆記*箭頭-15.png*文章內的目錄(錨點)image箭頭-15.png*關閉遮蓋版面的廣告*箭頭-15.png*隱藏上方藍色選單*箭頭-15.png*連結Google相簿*箭頭-15.png*圖片瘦身不失真*箭頭-15.png*讓部落格可以被Google*箭頭-15.png*Google Analytics分析*
箭頭-15.png精美分隔線圖片大全箭頭-15.png語法DIY美美的標題分隔線

 

 

痞客幫新手入門

痞客邦新手入門⑴|新手基礎入門設定 開啟部落格 設定作者名稱 痞客邦新手入門⑹|如何自訂個性化ICON圖標
痞客邦新手入門⑵|如何編輯側欄推薦連結區 痞客邦新手入門⑺|用語法外掛來撥放音樂
痞客邦新手入門⑶|宣傳Facebook粉專、浮動FB粉專外掛​​​ 痞客邦新手入門⑻|移除煩人的痞客邦廣告! 廣告__OUT!
痞客邦新手入門⑷|利用公告版位製造多樣性 痞客邦新手入門⑼|如何自己設定文章顯示的縮圖
痞客邦新手入門⑸|修改版面的字體字型 痞客邦新手入門⑽|如何在痞客邦發表文章

 

 

如果想要修改文字的色彩

color : #999999 ;                  文字色彩(色碼可以參考對照表 https://www.ifreesite.com/color/ )

                                              色碼也可以我的部落格後台樣式管理文字背景設計工具背景顏色   在這裏面也可以挑顏色找出對應色碼

                                               image
font-family : 標楷體 ;              文字字型

(可以有 新細明體、標楷體、Arial Impact、 monospace、 Microsoft JhengHei )

                                               (點我看更多字體)
font-size : 9pt ;                      文字大小
font-weight:bold                   粗體(設定字體厚度bold (厚)、bolder (更厚)、及 normal (正常))
font-style:italic ;                     斜體
vertical-align:super ;                文字上標
vertical-align:sub ;                   文字下標
text-decoration:underline ;     文字加下底線
text-decoration:overline ;       
文字上加上一條線
text-decoration:line-through 刪除線
text-align:right ;                     文字靠右對齊 
text-align:left ;                       文字靠左對齊 
text-align:center ;                  文字置中對齊 

p {
  text-align:left;
}

文字靠左對齊

p {
  text-align:right;
}

文字靠右對齊

p {
  text-align:center;
}

文字向中間對齊

border-style:solid   實線邊框  (預覽參照)

p {border-style:solid;} 實線邊框
p {border-style:dashed;} 虛線邊框
p {border-style:double;} 雙線邊框
p {border-style:dotted;} 點線邊框
p {border-style:groove;} 凹線邊框
p {border-style:ridge;} 凸線邊框
p {border-style:inset;} 嵌入線邊框
p {border-style:outset;} 浮出線邊框

border-width:          設定邊框寬度(可以是thin (薄)、medium (中等)、thick (厚)或是直接設定數字) (預覽參照)

 

關於字體(有一些系統可以認得中文,如果中文無法辨識,就加進英文的名稱喔!)

微軟正黑體=Microsoft JhengHei
新細明體 =PMingLiU
細明體=MingLiU
標楷體=DFKai-sb

 

更多的字體(by GOOGLE)_p.s.引入特殊字體會導致網頁載入速度變慢

先把想要的字體導入到你的CSS語法最前面

1591673512431.jpg

把你想要的字體雲端連結@import那一串貼在CSS最前面

楷體
@import url("https://fonts.googleapis.com/earlyaccess/cwtexkai.css");

仿宋體
@import url("https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css");

圓體
@import url("https://fonts.googleapis.com/earlyaccess/cwtexyen.css");

思源黑體
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");

 

然後去修改你的font-family,改成你要的字體

楷體
font-family: 'cwTeXKai'!important;

仿宋體
font-family: 'cwTeXFangSong'!important;

圓體
font-family: 'cwTeXYen'!important;

思源黑體
font-family: 'Noto Sans TC'!important;

 

可以加一行設定粗細

font-weight: Normal、bold(粗體)、bolder(更粗)

 

 

如果以上的筆記有你想要改的東西

比如說改字體 就在右上角點自己的頭像image我的部落格後台樣式管理部落格CSS原始碼

裡面按"Ctrl+F"搜尋我在字體語法有用紅字標示的"font-family"

然後就可以直接修改那段的語法,加進你要的字體,這樣就行囉!

arrow
arrow
    創作者介紹
    創作者 梅梅 的頭像
    梅梅

    梅花問路

    梅梅 發表在 痞客邦 留言(0) 人氣()