文字效果的語法~水精靈

文字的效果, 大概可以分為字型種類及特別修飾效果兩種

大部份的網頁編輯軟件也可以使用, 例如 FrontPage 或 DreamWeaver 等。開啟後, 你可以開啓一個新的.htm檔, 寫上文字, 然後在上面直接套用不同的字型在你的文字中, 最後將完成效果直接複製到你的部落格中即可。用網頁編輯軟件的好處就是方便使用, 和能夠即時預覽效果。以 Microsoft FrontPage 為例, 你可以直接使用它內裡超過100款字型,加上有段落整理和編輯字體大小顏色等工具, 對於不太熟識 HTML 的人來說, 確實非常確用。

如果你没有以上的網頁編輯軟件, 又或者想直接使用HTML來修改你的文字, 其實也不是太難, 先看看下面的例子吧~

<P align=center><FONT color=#0000ff face=Impact size=5>Welcome to here</FONT></P>
(HTML 碼)

將以上整句複製, 並貼上部落格內容區, 再按預覽, 就可以看見下面效果。

Welcome to here
(效果)

<P ......</P> 是文字段落的意思。
<FONT.......</FONT> 是指在這段範圍內是文字。
align=center 的意思是將文字置中, 除了center外, 此數值可以是 left 或 right。
Color=#0000ff 是代表顏色, 而其中0000ff是顏色代碼, 它是以16進制來計算的, 各顏色的代碼, 可按這裡, 又或者使用其他圖像編輯軟件。
face=Impact 就是字型, 這例子中就用了 Impact 字型。
size=5 是字體大小, 此數值越大, 字體越大。
Welcome to here 當然就是文字的內容。

以上各種數值, 均可以隨你個人喜好而修改, 再多舉個例子, 例如:

<P align=left><u><FONT color=#0dd900 face=標楷體 size=10>您好嗎?</FONT></u>
(HTML 碼)

將以上整句複製, 並貼上部落格內容區, 再按預覽, 就可以看見下面效果。

您好嗎?
(效果)
<u>...</u> 是指文字有底線。

看到吧? 只要修改不同數值, 文字就可改變~ 當然, 以上的例子就是最初級的 HTML入門, 但在往後的教學中, 因時間問題, 我只會將特別效果的 HTML 碼貼上, 各位可以直接複製使用, 但只會解釋重點, 一些比較基本的 HTML 碼就不再詳述, 各位有興趣的朋友可以再自行進修, 如果有問題, 可以留言啊~

其他文字效果例子:

字體大小例子

<FONT style="FONT-SIZE=500%">放大字體</FONT> (放大)
(HTML 碼)

　放大字體
(效果)
<FONT style="FONT-SIZE=70%">縮小字體</FONT> (縮小)

縮小字體
(效果)
"FONT-SIZE=500%" 此數值越大, 字體則越大; 相反, 數值越小, 字體則越小。

刪除線例子

<strike>文字加上刪除線</strike>
(HTML 碼)

文字加上刪除線
(效果)

上、下標文字例子

<SUP>上標文字</SUP>
(HTML 碼)

這是^上標文字
(效果)
 

<SUB>下標文字</SUB>
(HTML 碼)

這是_下標文字
(效果)

半透明文字例子

<P><DIV style="FONT-SIZE: 9pt; FILTER: Alpha(opacity=100,finishOpacity=0,style=2); WIDTH: 150px; LINE-HEIGHT: 18pt; HEIGHT: 150px">半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字半透明文字</DIV>
(HTML 碼)
 

(效果)
WIDTH: 150px 是指文字效果的闊度
LINE-HEIGHT: 18pt 是指每行文字之間的距離
HEIGHT: 150px 是指文字效果的高度

其實只要修改不同的參數, 文字效果就會改變, 多點試試不同的效果、字形、顏色等相關參數, 你自會了解更多。

在下面所介紹的文字效果, 已證實無法在 布洛格上使用, 在此例舉出來, 一方面好等各位無謂浪費時間測試, 另一方面, 可用於其他網頁上ㄚ

疊字例子

<P align=left><FONT style="FONT-SIZE:20pt;filter:dropshadow(color=#0000ff,offX=3,offY=3,Positive=5);WIDTH:100%; COLOR:#ff6600;LINE-HEIGHT:150%;FONT-FAMILY:MS PGothic"><B>ABC 重疊字</B></FONT></P></P>
(HTML 碼)

ABC 重疊字
(效果)
filter:dropshadow 是指文字套用疊字(影字)的效果
offX=3,offY=3,Positive=5 是指底層(影字)的位置

漸變色文字例子

<P align=left><FONT style="FONT-SIZE:20pt;filter:alpha(opacity=100,style=1);WIDTH:100%; COLOR=#44ee44;LINE-HEIGHT:100%;FONT-FAMILY:Staccato222 BT"><B>漸變色文字 ABCDE 123456789 abcdefghijklmnopqrstuvwxyz</B></FONT></P>
(HTML 碼)

漸變色文字 ABCDE 123456789 abcdefghijklmnopqrstuvwxyz
(效果)
filter:alpha 是指文字套用漸變色效果
opacity=100 是指漸變色的透明, 0代表透明, 100則表示完全不透明
style=1是指漸變方法, 0表示平均漸變, 1表示線性漸變, 2表示放射漸變, 3表示直角漸變。
width:100% 是指漸變色效果的寬度, 100%是整句文字。

波浪形文字例子

<SPAN style="FILTER: Wave(freq=3,strength=4,lightstrength=4,phase=0); height=5px">
<font size="4">波浪形文字波浪形文字波浪形文字<br>波浪形文字波浪形文字波浪形文字<br>波浪形文字波浪形文字波浪形文字</font></SPAN>
(HTML 碼)

波浪形文字波浪形文字波浪形文字
波浪形文字波浪形文字波浪形文字
波浪形文字波浪形文字波浪形文字
(效果)
freq=3 是指波浪的密度, 此數值越高, 波浪越密; 相反, 此數值越低, 波浪越少。
strength=4 是指波浪的振幅強度, 此數值最少為 0, 最大為 10。
lightstrength=4 是指波峰的強度, 此數值最少為 0, 最大為 100。
phase=0 是指波浪開始的位置, 此數值最少為 0, 最大為 100。
height=5px 是指波浪覆當度, 以 pixel 為單位。

立體文字例子

<P><FONT style="FONT-SIZE: 15pt; FILTER: Shadow(color=#0000ff,direction=150); HEIGHT: 19pt" face=Verdana color=#ffffff>3D 立體文字例子</FONT></P>
(HTML 碼)

3D 立體文字例子
(效果)
direction=150 是指文字影子的投射方向。

發光字例子

<FONT style="FILTER: glow(color=red,strength=2); WIDTH: 100%; COLOR: #ffffff; HEIGHT: 15px">發光字</FONT>
(HTML 碼)

發光字
(效果)
strength=3 是指文字背後光的強度。

顏色提示文字例子

<SPAN style="FILTER: Mask(color=#0000FF); HEIGHT: 10px; font-weight:700"><font size="4">顏色提示文字</font></SPAN>
(HTML 碼)

顏色提示文字
(效果)
HEIGHT: 10px 為文字背後顏色的高度。