本篇把一些跟設定字體相關的CSS語法全部蒐集在這裡
如果有什麼疑問或是建議,都可以提供給梅花,和梅花討論交流呦!
此處標示紅字的語法,要定位或是更改這些語法在自己樣式裡面的位置,進到自己的CSS路徑是
右上角點自己的頭像我的部落格後台樣式管理部落格CSS原始碼
搜尋語法的話可以按Ctrl+F搜尋即可~
如果梅花所提供的語法尋找名稱你怎麼樣都找不到的話請參考以下文章利用開發人員工具尋找可能的語法位置
梅花的語法筆記
檢視CSS標籤F12 (Ctrl+Shift+I) *開發人員工具*
部落格整體 #body *換背景底圖**換字體**換部落格ICON**設計LOGO*
封面橫幅#banner/#header *換封面底圖**部落格標題敘述大小位置*
文章區塊 #content *改文章標題字體、背景*
公告版面 #spotlight *公告版面應用*
側欄區塊 #links *改側欄標題的背景**Facebook粉專外掛**音樂外掛**YouTube外掛**分享連結階層*
實用推薦 *看所有語法筆記文章**梅花的語法筆記本**看梅花的CSS標籤筆記**文章內的目錄(錨點)**關閉遮蓋版面的廣告**隱藏上方藍色選單**連結Google相簿**圖片瘦身不失真**讓部落格可以被Google**Google Analytics分析*
精美分隔線圖片大全語法DIY美美的標題分隔線
痞客幫新手入門
如果想要修改文字的色彩
color : #999999 ; 文字色彩(色碼可以參考對照表 https://www.ifreesite.com/color/ )
色碼也可以我的部落格後台樣式管理文字背景設計工具背景顏色 在這裏面也可以挑顏色找出對應色碼
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 { |
文字靠左對齊 |
p { |
文字靠右對齊 |
p { |
文字向中間對齊 |
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語法最前面
把你想要的字體雲端連結@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(更粗)
如果以上的筆記有你想要改的東西
比如說改字體 就在右上角點自己的頭像我的部落格後台樣式管理部落格CSS原始碼
裡面按"Ctrl+F"搜尋我在字體語法有用紅字標示的"font-family"
然後就可以直接修改那段的語法,加進你要的字體,這樣就行囉!
留言列表