如何利用PHP和CSS改變網頁文字大小

用php和CSS改變網頁文字大小——在設計網站的時候，要牢記一點：並不是所有的訪問者都是神采奕奕的年輕人，而且他們也不一定完全熟悉Web瀏覽器的各種使用方法。

在設計網站的時候，要牢記一點：並不是所有的訪問者都是神采奕奕的年輕人，而且他們也不一定完全熟悉Web瀏覽器的各種使用方法。聰明的設計者瞭解這一點，他們常常將各種特殊的可訪問特性融入網站的設計中，這樣，即使是年長者或是殘疾人士都可以方便舒適地使用網站，而不必花費額外的力氣。

文字大小調節器是最有效可訪問特性中的一個，任何網站都可能需要它，簡而言之，這是一個用於改變網頁文字大小的工具，通常用於將文本變大從而易於閱讀，很多瀏覽器已經內建了這一特色，但是網路瀏覽器的初學者並不知道如何使用這一功能，因此，網站的設計者經常將更便於使用的按鈕放在每個網頁上來實現這一功能。

這篇指南將向您介紹如何使用PHP和CSS在網頁上添加具備這種功能的文字大小調節器，因此，趕快向您的網站添加這一可訪問性，這樣從年紀大於50歲的使用者那裡獲得讚譽的積分，繼續向下讀，您將學會使用它的方法。

注意：這篇指南假定您已經安裝了Apache和PHP

它是如何工作的？

在寫代碼之前，花一些時間來理解文字大小調節器的工作方式是非常有益的。網站中的每個網頁都包含一系列控制按鈕，他們允許使用者選擇頁面的文字大小：小號、中號和大號，每種字型大小都對應於一種CSS樣式表，這些樣式表儲存了用於渲染網頁文字大小的規則。

當使用者做出選擇的時候，PHP將使用者選定的字型大小儲存在一個會話變數中，然後重新載入網頁，該頁面將從會話變數中讀取選定的字型大小，並動態調用相應的樣式表以更小的字型大小或更大的字型大小來重新渲染網頁。

過程

第一步：建立網頁

從建立HTML文檔開始，首先完成預留位置的內容，列表A是一個例子：
列表A：

Text size: small | href="resize.php?s=medium">medium | large

Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua. Utenim
ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea
commodoconsequat.
Duisauteirure dolor in rePRehenderit in
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
officiadeseruntmollitanim id estlaborum.

對頁面頂部的文字超連結要特別注意，每個超連結都指向了名為resize.php的指令檔，並通過URL GET方法將選定的字型大小傳遞給它。

在您的Web伺服器目錄中以.php的副檔名來儲存這個文檔，例如，index.php。

第二步：建立樣式表

接下來，為每種文字大小建立樣式表檔案：small.css, medium.css和large.css，這是small.css的檔案內容：

body {
font: 10px
}

同樣，可以建立medium.css和large.css，分別使用17px和25px，將這些樣式表檔案和上一步建立的網頁儲存在同一個目錄中。

第三步：建立文字大小的改變機制

正如上文介紹的，網頁通過尋找預先定義的會話變數可以"知道"載入哪個樣式表檔案，會話變數是通過指令檔resize.php來控制的（參見列表B），該檔案是在使用者點擊了網頁頂部改變文字大小的按鈕時啟用的，這是resize.php的內容：

列表B

// start session
// import selected size into session
session_start();
$_SESSION['textsize'] = $_GET['s'];
header("Location: " . $_SERVER['HTTP_REFERER']);
?>

這很簡單，當使用者選擇了一種新的文字大小，resize.php通過GET方法來獲得字型大小的值，並將其儲存在會話變數$_SESSION['textsize']中，然後將瀏覽器重新定向到原來開啟的哪個頁面。

當然，這裡還缺少一個組件：智能化得讓網頁自動檢測現在使用者現在選定的文字大小並載入相應的樣式表，為加入這一功能，開啟您的網頁檔案index.php，並將以下語句加入到檔案的開頭（參見列表C）：

列表C

// start session
// import variables
session_start();
// set default text size for this page
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'medium';
}
?>

You should also add a stylesheet link between the ... elements, as follows:
type="text/css">

這是列表D，完整的index.php檔案應該是這樣的：

列表D:

// start session
// import variables
session_start();
// set default text size for this page
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = 'medium';
}
?>

type="text/css">

Text size: small | href="resize.php?s=medium">medium | large

Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
magna aliqua. Utenim
ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea
commodoconsequat.
Duisauteirure dolor in reprehenderit in
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
officiadeseruntmollitanim id estlaborum.

理解這種工作方式應該很簡單了，當載入網頁的時候，它恢複當前的會話，並檢查$_SESSION['textsize']變數是否與當先選擇的字型大小相符，然後通過元素動態載入相應的樣式表，這將導致網頁以正確的大小自動重新渲染。 聯合使用PHP和CSS與傳統的方式略有不同，傳統方式是使用javaScript來動態改變CSS樣式表，相對於Javascript方法，PHP方法的優勢在於您不需要依賴用戶端對JavaScript的支援，您也不需擔心專門建立針對某個瀏覽器的工作，也許下一次您坐下來設計網站的時候會發現這種方法很有效，祝編程愉快！

