Comments on Abin's Tech Note: 動態調整文章字體大小

2012-01-10T10:43:57.778+08:00

作者已經移除這則留言。

To 烈燄: 如果是用文字表示字型大小的話，後面是沒有單位的，直接用 fontSize = '...

2009-11-24T09:51:58.692+08:00

To 烈燄:
如果是用文字表示字型大小的話，後面是沒有單位的，直接用 fontSize = 'xx-small' 之類的即可。
舉例，如果不用指定字型大小的數字，要用文字，上面的 Javascript 程式裡倒數第三行改成:
components[i].style.fontSize = size;
而要呼叫的時候就不能用數字，要用文字，像是：
<a href="javascript:FontZoom('xx-small');">xx-small</a>
<a href="javascript:FontZoom('medium');">medium</a>
<a href="javascript:FontZoom('x-large');">x-large</a>

感謝您的回答,另請問如字體是採用xx-small, x-small, small, medium, ...

2009-11-23T23:24:51.147+08:00

感謝您的回答,另請問如字體是採用xx-small, x-small, small, medium, large, x-large,這種方式的話,那您上面的HACK裡的fontSize = size+'px';這裡的單位可以改嗎?如可以那要成什麼單位呢?謝謝歐!

To 烈燄: 首先，文章內的「本文」我從來都不去改字型大小，用的都是預設樣板內的變數，所以其實只要改...

2009-11-23T10:27:09.505+08:00

To 烈燄:
首先，文章內的「本文」我從來都不去改字型大小，用的都是預設樣板內的變數，所以其實只要改這個變數的樣式，所有本文的字型大小舊會跟著變動。
但用 Live Writer 或新版編輯器，這類「所視即所得」的工具固然方便，但背地裡的原始碼你並不知道它會幫你加什麼標籤或定義變數（像會強制嵌入字型大小的定義），一旦被塞入一些標籤或變數，本文提到更改文字樣式的 Javascript 就可能會找不到指定物件，要改他們的樣式讓字型變大變小當然就不會動（像你提到 fontsize 用不同方式來定義就是一例）。
我自己都是用 Google Doc 來寫文章，要發表時直接貼入文章的 HTML 原始碼，一方面檢查有沒有被系統塞入的無謂標籤，另一方面如果有特殊要求也可以微調。如果沒有其他樣式需求，其實用最簡單的編輯器（記事本）寫也可以。

您好,我用blogger(新版文章編輯器)或 Windows Live Writer 來寫的文章都不...

2009-11-22T17:00:33.577+08:00

您好,我用blogger(新版文章編輯器)或 Windows Live Writer 來寫的文章都不能正常使用這個HACK,但用blogger(舊版文章編輯器)則可以正常,我試找問題所在,原因好像是blogger(新版文章編輯器)fontSize是用英文大中小來表示,Windows Live Writer是用數字來表示,而blogger(舊版文章編輯器)是用百分比表示,請問有方法或改參數來使用這個
HACK嗎?或您是用什麼來寫blogger文章.請大大有空幫我解答一下謝謝？

To Angel: 上面「第二步驟」的程式碼就是連結的部份，我自己只不過是把</a>前面...

2009-04-14T09:19:00.000+08:00

To Angel:
上面「第二步驟」的程式碼就是連結的部份，我自己只不過是把</a>前面的 16, 14, 12 分別替換成了 "+", "Font", "-" 而已。至於要替換成圖片，一樣是把 16-12 這幾個數字換成圖片的程式碼，像是 <img src="圖片網址" />就行了。這部份應該是基本的 HTML 語法，如果你沒有概念的話，可能要自己先參考 HTML 相關的教學文章。

您好,我照著您的做法做了式的確成功了:D
但是因為我不太了解該如何去解決聯結的問題
...

2009-04-13T23:33:00.000+08:00

您好,我照著您的做法做了式的確成功了:D
但是因為我不太了解該如何去解決聯結的問題
比如說如果我想跟您一樣用+,-來做
or利用圖片來做一個連結的話
那這樣又該如何去改呢?
先感謝您的回答!:D

謝謝你的分享，我成功的加到了自己的 blogger 上。 ^^

2009-04-01T22:11:00.000+08:00

謝謝你的分享，我成功的加到了自己的 blogger 上。 ^^

前輩您好:
還是我
希望你不要以為我是來亂的
因為當我發佈上一篇回覆後
大於...

2008-09-04T20:42:00.000+08:00

前輩您好:
還是我
希望你不要以為我是來亂的
因為當我發佈上一篇回覆後
大於符號竟然又正常的出現
搞的我一愣一愣的
但希望有碰到跟我一樣問題的人
不要再花三個小時碰的自己頭破血流
奇怪
鬼門明明都關了....

前輩您好:
我剛剛發現了問題所在
我直接去拷貝您的原始檔
結果完全沒問題
可...

2008-09-04T20:27:00.000+08:00

前輩您好:
我剛剛發現了問題所在
我直接去拷貝您的原始檔
結果完全沒問題
可以正常使用
比對之下
我才發現問題出在js的第六行
關於for判斷式
for(i = 0, j = 0; i < element.length; i++)

"<"應該是大於符號
不知道什麼原因
變成這個亂碼
下面的判斷式也有出現這問題

不知道是我電腦的編碼問題還是有其他的原因
感謝您的分享
讓我學會了這技巧
謝謝您!

前輩您好:
小弟遍尋此功能
終於在您的部落格中尋獲
在開心之餘
立刻做了一個...

2008-09-04T19:57:00.000+08:00

前輩您好:
小弟遍尋此功能
終於在您的部落格中尋獲
在開心之餘
立刻做了一個簡單的小試驗
但在我反覆仔細檢查程式碼後
卻發現絲毫無作用
請允許我把完整的原始碼貼上
希望前輩可以幫小弟我"健診"
感激不盡!!!!!!

以下為程式碼
(因blogger不允許張貼標記因此我刪除了一些"<"符號我已確定在dw中這些記號我都有註記)
----------------------------------
html xmlns="http://www.w3.org/1999/xhtml"
script type='text/javascript'
function FontZoom(size)
{
var element = document.getElementsByTagName("div");
var components = new Array();
for(i = 0, j = 0; i < element.length; i++) {
attribute = element[i].getAttribute("id");
if(attribute == "main-wrapper") {
components[j] = element[i];
j++;
}
}
for (i = 0; i < components.length; i++)
components[i].style.fontSize = size+'px';
}
/script
head

title無標題文件/title
/head
body
a href="javascript:FontZoom(16)"16/a
a href="javascript:FontZoom(14)"14/a
a href="javascript:FontZoom(12)"12/a
div id="main-wrapper"
div id="shit" shit /div
/div
/body
/html

-----------------------------------

再一次感謝您~~~~

2008-09-04T19:55:00.000+08:00

作者已經移除這則留言。

謝謝
版主
我會在調整版面的
還有調整原始碼謝謝

2008-04-16T14:06:00.000+08:00

謝謝
版主
我會在調整版面的
還有調整原始碼謝謝

To ralph:
我不知道你有沒有看懂我原始碼的意思，這個字體變化的 hack，主要是透過 ...

2008-04-15T16:25:00.000+08:00

To ralph:
我不知道你有沒有看懂我原始碼的意思，這個字體變化的 hack，主要是透過 Javascript 動態去更改某個 CSS 樣式，我範例裡是 main-wrapper 這個 div。
我看你的 blog，密密麻麻塞了一堆模組和東西，其中有的都還有自己的樣式，想當然一定會覆蓋掉 hack 裡定義的樣式，因此部份字體不會動態變動，我不可能幫你一個個 debug、找出衝突的部份，你要自己調整樣板的原始碼。

我的也不行耶，
只有文章的日期有變化，
文章內容還是沒改變
可以請大大幫我看一下嗎...

2008-04-12T17:15:00.000+08:00

我的也不行耶，
只有文章的日期有變化，
文章內容還是沒改變
可以請大大幫我看一下嗎？

感謝教學，不過我連你的設計方法都套用囉。
之前就依直覺的想用個條字型的但都懶得用，剛googl...

2008-04-10T18:50:00.000+08:00

感謝教學，不過我連你的設計方法都套用囉。
之前就依直覺的想用個條字型的但都懶得用，剛google發現，謝謝了。

按照Abin 大哥所提供的方式,順利修改了這個內容,可以說是相當的好...這樣在讀者的閱讀上也更加順...

2008-03-05T12:09:00.000+08:00

按照Abin 大哥所提供的方式,順利修改了這個內容,可以說是相當的好...這樣在讀者的閱讀上也更加順利了

請問我在文章上

分享flash小遊戲

我想讓flash能給網友調整大小<...

2007-08-03T18:06:00.000+08:00

請問我在文章上

分享flash小遊戲

我想讓flash能給網友調整大小
ex：
320x240
800x600
1024x986

原本程式
＜embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave-flash" src="FLASH 網址" flashvars=""＞＜/embed＞

我要如何改呢
style="width:？？？px; height:？？？px;"

可以教一下嗎

那個顯示在 header 裡的 font 字樣，要置中置左置右請自己套用 CSS 來達成。我自己的頁...

2007-03-19T11:25:00.000+08:00

那個顯示在 header 裡的 font 字樣，要置中置左置右請自己套用 CSS 來達成。我自己的頁面是「標題置中，字樣靠右」，你可以看我頁面的原始碼，參考關於 FontZooming 這個 class 的樣式。

請問如果header-wrapper裡面的title是置左的話，照你的程式碼貼上去的"+font-"...

2007-03-19T06:41:00.000+08:00

請問如果header-wrapper裡面的title是置左的話，照你的程式碼貼上去的"+font-"也是跟著置左。如果讓title置左，但"+font-"置右呢？

您的blog內容非常豐富喲，學到很多東西，也感謝您的回答～

2007-02-02T20:56:00.000+08:00

您的blog內容非常豐富喲，學到很多東西，也感謝您的回答～

Dear abin, 謝謝你詳細的說明～

2007-02-02T20:52:00.000+08:00

Dear abin,

謝謝你詳細的說明～

如果要動字距，那要修改 Javascript 一下。有注意到，更改字體大小是下面這一行： compo...

2007-02-02T11:19:00.000+08:00

如果要動字距，那要修改 Javascript 一下。有注意到，更改字體大小是下面這一行：
components[i].style.fontSize = size+'px';
其中，是透過更改 style 的 fontsize 屬性來變動字型大小，如果你要改字距，屬性是 LetterSpacing，你增加或是替換掉一行就可以了，像是：
components[i].style.LetterSpacing = size+'px';
如果還有其他屬性想變動，也可以參考 CSS 和 Javascript Style 屬性的對照表，找出想改的屬性並修改 Javascript 就可以，自己調整看看囉！

謝謝您的分享，字型確實可以自由更換了～但有個額外的問題，如果要調整字距應該如何做呢？謝謝喔～

2007-02-01T22:47:00.000+08:00

謝謝您的分享，字型確實可以自由更換了～
但有個額外的問題，如果要調整字距應該如何做呢？

謝謝喔～

成功了，謝謝！

2007-01-30T11:27:00.000+08:00

成功了，謝謝！

Comments on Abin's Tech Note: 動態調整文章字體大小

To 烈燄: 如果是用文字表示字型大小的話，後面是沒有單位的，直接用 fontSize = '...

感謝您的回答,另請問如字體是採用xx-small, x-small, small, medium, ...

To 烈燄: 首先，文章內的「本文」我從來都不去改字型大小，用的都是預設樣板內的變數，所以其實只要改...

您好,我用blogger(新版文章編輯器)或 Windows Live Writer 來寫的文章都不...

To Angel: 上面「第二步驟」的程式碼就是連結的部份，我自己只不過是把</a>前面...

您好,我照著您的做法做了 式的確成功了:D但是因為我不太了解該如何去解決聯結的問題...

謝謝你的分享，我成功的加到了自己的 blogger 上。 ^^

前輩您好:還是我希望你不要以為我是來亂的因為當我發佈上一篇回覆後大於...

前輩您好:我剛剛發現了問題所在我直接去拷貝您的原始檔結果完全沒問題可...

前輩您好:小弟遍尋此功能終於在您的部落格中尋獲在開心之餘立刻做了一個...

謝謝版主我會在調整版面的還有調整原始碼謝謝

To ralph:我不知道你有沒有看懂我原始碼的意思，這個字體變化的 hack，主要是透過 ...

我的也不行耶，只有文章的日期有變化，文章內容還是沒改變可以請大大幫我看一下嗎...

感謝教學，不過我連你的設計方法都套用囉。之前就依直覺的想用個條字型的但都懶得用，剛googl...

按照Abin 大哥所提供的方式,順利修改了這個內容,可以說是相當的好...這樣在讀者的閱讀上也更加順...

請問我在文章上分享flash小遊戲我想讓flash能給網友調整大小<...

那個顯示在 header 裡的 font 字樣，要置中置左置右請自己套用 CSS 來達成。我自己的頁...

請問如果header-wrapper裡面的title是置左的話，照你的程式碼貼上去的"+font-"...

您的blog內容非常豐富喲，學到很多東西，也感謝您的回答～

Dear abin, 謝謝你詳細的說明～

如果要動字距，那要修改 Javascript 一下。有注意到，更改字體大小是下面這一行： compo...

謝謝您的分享，字型確實可以自由更換了～ 但有個額外的問題，如果要調整字距應該如何做呢？ 謝謝喔～

成功了，謝謝！

您好,我照著您的做法做了式的確成功了:D
但是因為我不太了解該如何去解決聯結的問題
...

前輩您好:
還是我
希望你不要以為我是來亂的
因為當我發佈上一篇回覆後
大於...

前輩您好:
我剛剛發現了問題所在
我直接去拷貝您的原始檔
結果完全沒問題
可...

前輩您好:
小弟遍尋此功能
終於在您的部落格中尋獲
在開心之餘
立刻做了一個...

謝謝
版主
我會在調整版面的
還有調整原始碼謝謝

To ralph:
我不知道你有沒有看懂我原始碼的意思，這個字體變化的 hack，主要是透過 ...

我的也不行耶，
只有文章的日期有變化，
文章內容還是沒改變
可以請大大幫我看一下嗎...

感謝教學，不過我連你的設計方法都套用囉。
之前就依直覺的想用個條字型的但都懶得用，剛googl...

請問我在文章上

分享flash小遊戲

我想讓flash能給網友調整大小<...

謝謝您的分享，字型確實可以自由更換了～但有個額外的問題，如果要調整字距應該如何做呢？謝謝喔～