days here| Online
﹥I am 桑妮 :D arrow_61.gif 加我為Pixnet好友
﹥最佳解析度、瀏覽器:1024*768↑ on Firefox & Chrome

※ 近來少使用痞客邦,無法即時回應留言,請見諒噢。
 不回應籠統的問題,沒禮貌的留言也不會回覆。若是有明確問題的留言,看到就會回應。
發現有很多人的問題都是“如何改字型、如何改字的大小”,所以發一篇文來做簡單的解釋…說的不好請見諒嗄!
希望以後有問題可以先看過解說,若不懂或是桑妮講的不詳細再問喔!



關於字的大小,
CSS
是這樣寫的:
font-size: 10px;
  (這是10px大小的範例,當然數字可以變大變小。)
  font 就是字型、字體的意思,而size 是大小,所以font-size就是字的大小,簡單吧!
 
那字型呢?請看:
font-family: "Verdana";
  (這是Verdana字型的範例。)
  font 已經說過了,就是字體。至於為什麼是用family…其實我不知道欸!可是我想應該是字型家族的意思吧…
  要注意的是,當你的字型是兩個字以上,要加””把它們框起來。(我的習慣是不管幾個字都把它框起來啦…)
  還有,如果觀看者的電腦沒有設定的字型,會看到細明體噢。
  (所以不是想設定什麼字體就會顯是什麼字體,要先確定自己有沒有那個字體。)
 
大小字型都會了,那就可以自己改囉!只是還要知道你想改的是哪個部分,這裡只提一下比較常遇到的部分。(請注意這裡說的標籤是痞客模板!)
  網誌名稱: #banner h1
  網誌描述: #banner h2
  文章標題: .title h2
  文章內容: .article-content
 
再給個範例,若今天我要把網誌名稱改成字型是SimHei,大小30px的話,
我可以這樣寫:
#banner h1{ font-size: 30px; font-family: "SimHei"; }
  這個寫法就是剛剛上面說到的。
  但是事實上我不會這樣寫,因為我覺得太長了…
所以我又可以這樣寫:
#banner h1{font: 30px “SimHei”; }
  這樣就短多了吧!這是簡寫,當然還可以加入別的東西。
例如:font: bold 25px “Georgia”; 這就是粗體、大小25、字型是Georgia的字。


 
以上,就是如何變化字型大小的小小小小小小教學,希望有人看的懂…
不懂請留迴響發問,我再回答。(如果我會的話…)
若效果不錯,以後可能會持續增加一些基本的解說
(太難的我也不會啦… XDD)
 
哪裡說錯,請跟我指正一下…Thanks a lot!

創作者介紹

Learn to live *

桑妮♥ 發表在 痞客邦 PIXNET 留言(36) 人氣()


留言列表 (36)

發表留言
  • 悄悄話
  • dai
  • 寫得清楚又好懂噎!謝謝!^^
  • Dai 你超好的啦!
    這個明明你就會 XDD

    桑妮♥ 於 2008/04/01 15:02 回覆

  • joyce00927
  • 這樣寫真的很容易懂
    謝謝囉~!!
  • 不客氣~XD
    有幫到你我很開心!!

    桑妮♥ 於 2008/04/03 18:39 回覆

  • 悄悄話
  • spirit1125
  • 怎麼設定我懂了,不過還有個問題~~
    請問啊~~就是字型該打什麼?
    就是""裡面要怎麼打?
    只能夠打英文嗎?我要怎麼找到那個字型的英文?

    不好意思又有問題,不曉得懂不懂我的問題~
  • 中文應該也可以打吧..你試試看阿 = w =
    只是中文的除了細明體跟標楷體..
    其他的有很多人沒有吧!
    英文字體的名字, 我是用word 看的 :D

    桑妮♥ 於 2008/04/04 20:33 回覆

  • 悄悄話
  • coalfly846
  •  
     謝謝ˊˋ
     我之前找教學都看不懂,不知道是不是我太笨= =+++
     
  • 那..現在你懂了嗎?? @w@

    桑妮♥ 於 2008/04/05 05:42 回覆

  • coalfly846
  •  
     噗噗,懂了 =)
     謝謝你噢 ^^
     
     順帶一提,樣式做得很漂亮耶 嘻
     
  • 懂了就好~有幫到人我很開心~
    謝謝你的順帶一提!! XD

    桑妮♥ 於 2008/04/05 12:30 回覆

  • 悄悄話
  • 悄悄話
  • chrisdiva
  • 原來如此...

    那我想請問一下...
    如果是中文字,我想把他改成英文字要怎麼改呢??

    像是,綠 奶茶這個版面,她的題目(相簿、網誌、留言、名片)
    可以改成英文的嗎??
  • 那個不能這樣改唷...
    要用圖片代替了! :)

    桑妮♥ 於 2008/04/24 04:55 回覆

  • chrisdiva
  • 喔喔~~

    那我想請問...要怎麼把那些標題(如我之前問的題目)圖片改小呢??

    呃...還有就是文章版面我想要改大一點...

    不好意思喔...我的問題一堆...=口="
  • 什麼圖片??


    文章版面要改大的話.
    找CSS裡
    #content{}
    #links{}
    #links-row-1{}
    #links-row-2{}

    裡面都有width: *px;
    *是數字, 把他改大就可以了
    width就是寬度的意思

    要注意:
    #content和#links的寬度不可以大於#body-div的寬度
    #links-row-1和#links-row-2的寬度不可以大於#link的寬度

    桑妮♥ 於 2008/04/25 06:41 回覆

  • chrisdiva
  • 哈哈~~經過我的篡改以後...

    版面的位子(除了文章版面)全跑到下面去了....><

    怎麼會這樣哩...嗚...(頭痛...)

    雖然YINGMEI大大說的很清楚...
    可是...
    我改出來的全走位了...= ="
  • 你把版面換掉了,我也沒辦法幫你看..

    桑妮♥ 於 2008/04/25 06:43 回覆

  • chrisdiva
  • ~!!!???YINGMEI大大願意幫小的看嗎~~!!??哇~~超高興>3<

    好!!我馬上換回來~~(衝~~)
  • 你先照著我跟你說的再改改看..
    還是跑位的話,先不要換掉..等我幫你看 ^ ^
    --
    你可以叫我桑妮啦 XD

    桑妮♥ 於 2008/04/25 20:25 回覆

  • 悄悄話
  • tina9240
  • 桑妮~~
    (一)請問網誌描述
    #banner h2{position: absolute; top: 95px; *top: 80px; left: 17px; color: #333; width: 350px; "華康娃娃體"}
    #banner h2 a{color: #666; font : }
    為何沒辦法做字體的更改呢?
    (二)文章內容: .article-content
    .article-content{line-height: 20px; padding: 20px 10px 20px 0px; }
    .article-content a{color: #0066B3; font: bold "Comic Sans MS"; }→是這裡要 改成娃娃體嗎?
    .article-content a:hover{color: #fff; }
    (三)最新文章、站方公告...這個字型也可以改嗎?
    (四)我如果要換照片
    #banner{background:url(http://p9.p.pixnet.net/albums/userpics/9/8/484898/1200542444.jpg) no-repeat 400px 50px; height: 273px; width: 965px; }

    http://tina9240.pixnet.net/album/photo/138868802#pictop
    是點自已想要的相片,然後複製網址嗎?
    我有試過這樣,但是最後左下角已顯示完成,但是照片的地方是空白的

    讓你費心回答了
  • (一) 語法錯誤囉。如果只有要加字型而沒有其他的話,應該是font-family: "華康娃娃體";
    (二) 摁,改""裡的字就可以了。
    (三) 可以,標籤是.box-title
    摁…改字型的話,要先確定你的電腦裡有那個字型,否則會看到新細明體。
    (四) 不是複製網址列的網址唷,要對著照片點右鍵∕內容,裡面有網址,要複製那裡的網址。

    有問題可以再問我。:)

    桑妮♥ 於 2009/12/28 05:47 回覆

  • tina9240
  • 桑妮~~
    謝謝您的回覆~我也已經按照您的方式做了修改
    想再請問,我可以將現在這個板改成『三欄式』的嗎?
    最右邊這一欄我想用語法寫放照片?可以嗎?
  • 改成三欄式的會很麻煩,要改的東西很多噢。
    如果確定要改再到留言版問我,我再教你。:)

    桑妮♥ 於 2010/01/05 10:47 回覆

  • tina9240
  • 桑妮~
    我想做的感覺大概是像這個媽媽http://ethanc.pixnet.net/blog
    右邊都可以放自己的照片
    如果用您的三欄式會比較好修改嗎?↓
    http://yingmei75.pixnet.net/album/photo/111652254#pictop


  • 摁,同樣是三欄式的就不用再修改了呀!
    不過puppy love的欄寬可能會有點小,還是要看你的相片要放多大張的。
    只要寬度在欄位的寬度範圍內,應該是不會有什麼問題的。

    桑妮♥ 於 2010/01/24 08:25 回覆

  • tina9240
  • 桑妮
    有辦法把欄寬加寬嗎
    如果照片和這個媽咪用的大小一樣大約是多少
    還是您有建議的大小呢
  • 欄位加寬可以參考之前打的教學,
    但不建議這樣做就是了…

    桑妮♥ 於 2010/03/23 07:58 回覆

  • tina9240
  • 桑妮
    請問若是想要文章裡放入you tube要如何用呢?
  • youtube影片在最後都會有個"勘入..."
    把那邊的語法貼到文章內就可以了! :)

    桑妮♥ 於 2010/03/23 08:11 回覆

  • tina9240
  • 桑妮
    我貼了,但是貼進去後出現的是一堆網址吶~怎麼會這樣@@
  • 摁…在原始編碼底下貼貼看?

    桑妮♥ 於 2010/04/12 14:21 回覆

  • tina9240
  • 桑妮
    謝謝您
    貼在您說的原始編碼就可以了^^
    好開心^^
  • 不用客氣~ 很高興可以幫到你嗄!! :D

    桑妮♥ 於 2010/04/13 08:35 回覆

  • cathys19771225
  • 真的很簡單耶~~不過我想問個更簡單的問題@@
    請問要到哪去改變語法啊~~有路徑可以說明嗎>"<
  • 進入部落格後台,
    點選左邊的選單【樣式設計精靈】,
    選擇【CSS原始碼編輯】即可。 :)

    桑妮♥ 於 2010/06/21 23:47 回覆

  • 悄悄話
  • cathys19771225
  • yes~
    謝謝您~~ 真的 ^^
  • OK就好,不用客氣~
    有問題可以再問我。 :)

    桑妮♥ 於 2010/06/25 08:03 回覆

  • YouNiQ3Q
  • 教學超有用的啦
    是說
    text-decoration:none
    這個是什麼意思??
  • 就是把文字裝飾弄掉。
    有的連結他會自己有底線,設定這個就不會有了。

    桑妮♥ 於 2010/06/26 20:56 回覆

  • YouNiQ3Q
  • 對了~再問一個問提
    想把滑鼠移到超連結上
    字會變粗體的語法要怎嚜改??
  • a:hover{font-weight: bold; }

    a是超連結,a:hover是滑鼠移到超連結上。
    font-weight: bold 設定為粗體字。

    桑妮♥ 於 2010/06/26 21:01 回覆

  • YouNiQ3Q
  • 不好意思一直麻煩你
    因為我鄭在自己改語法中><

    要把"相簿""名片"部落格""留言板"
    這些改成圖要怎嚜弄??
  • 這個比較複雜,方法也不只一種。

    簡單來說是這樣:
    先把那些連結的字都改成看不到,然後把背景設為圖片,
    最後設定好寬跟高就可以了。

    你可以試著先用別人寫好的語法,去改改看,會比較好上手。

    桑妮♥ 於 2010/06/26 21:05 回覆

  • 悄悄話
  • 豆滾足跡
  • 請問要更改文章標題字體大小,要從那裡改? 謝謝!
  • 請仔細看過文章再發問,謝謝。

    桑妮♥ 於 2013/09/07 03:41 回覆

  • 咪蜜♥
  • 哈囉桑呢!

    我的文章內容字體想變小變細,但是我用的語法都沒有用!
    我把樣式改回原始的所以我找不到我之前的語法怎麼半? 謝謝
  • 桃樂絲
  • 運用大大的方法改了部落格字體跟大小,非常感謝您無私地分享!
  • C &amp; J
  • 桑妮您好,我用了0012-2的樣板很久的時間了,字體大小我有更改article-content中的font-size:16px,之前使用上都沒問題,最近發文時都會出現字體大小會有不一的狀況,請參考這篇:http://jacintachien.pixnet.net/blog/post/60748711,其它篇我已直接在寫文章時全選字體然後再選擇字體12,但覺得這樣很麻煩,所以有寫信給痞客客服人員詢問。

    得到的答案是:經查詢您目前使用的樣式語法可能會與文章設定的格式語法等有衝突,導致您發表的文章會有文字大小不一的情況… 服務人員為您預覽其他樣式後,確認您提供的文章即不會有文字大小不一的情況,建議可嘗試調整或使用其他樣式確認看看。

    因為我對語法不熟,所以只好再來請教您了,不知樣式語法是否如客服說的,在設定上會有衝突,該如何解決呢?麻煩您了,先謝謝您囉! ^ ^
  • 悄悄話
找更多相關文章與討論