修改 Moodle 的文章字體大小及行距

今天伙伴 huihui 說到 moodle 的文章字體和行距太小，不易閱讀。為了我們自己和學生的視力著想，那就動手改看看了。

moodle 是有佈景主題的觀念的，所有的佈景主題都在 moodle/theme 目錄下，我們用的佈景主題是 formal_white，那麼，要修改的檔案就在 moodle/theme/formal_white 目錄下了。

進入該目錄後，看到有三個可以望文生意的檔案： fw_font.css 、 fw_colors.css 、 fw_layout.css 。看來應該分別是設定字型、顏色、外觀的 css 檔了。藉著 FireFox + WebDeveloper extension 的幫助，很快的找到了應該改的地方是 fw_font.css 裡面的這一段：

body, td, li { font-family: Arial, Helvetica, sans-serif; font-size : 15px; /* 原來為 13px */ line-height : 24px; /*另外加上的，將行高設為 24px ，以增加行距 */ }

原本是想把 font-size 設為 16px 或 14px ，但是 16px 字太大， 14px 字很醜，經試過後，覺得 15px 還不錯。

改好之後，後遺症出現了：導覽列的文字變成向下偏移。再次藉由 FireFox + WebDeveloper extension 的幫助，找到 fw_layouot.css 裡面的這一段：

.navbar { margin-right: 5px; width: 100%; padding:0px; height: 30px; /* 由原來的 27px 改成 30px 以加大導覽列的高度 */ border-width:1px; border-style:solid; } .breadcrumb { /*padding-top: 1px;*/ /* 既然導覽列文字偏低，那文字上方的間隔就不要了。 */ padding-left: 3px; }

畫面也許不怎麼美觀，但至少閱讀舒服多了。

對了，我們的 moodle 站：內壢高中數位學習網站，有空來看看。