PHP 搭配 CSS 實現網頁字體大小動態切換

無障礙網頁設計重視所有使用者的瀏覽體驗，尤其對視力不佳的長者或弱視族群，提供直觀的字體縮放功能至關重要。雖然瀏覽器內建縮放，但許多使用者不知操作。本文示範如何用 PHP Session 記住使用者偏好，動態切換 CSS 檔案，實現無障礙字體大小調整。

一、運作原理

1. 頁面頂部提供「小、中、大」三個按鈕/連結
2. 點擊時傳遞尺寸參數至 resize.php
3. resize.php 將選擇寫入 $_SESSION['textsize']，並導回原頁
4. 頁面載入時讀取 Session，動態引入對應 CSS (small.css, medium.css, large.css)

二、實作步驟

步驟 1：建立主頁面 (index.php)

<?php
session_start();
// 設定預設字體大小
if (!isset($_SESSION['textsize'])) {
    $_SESSION['textsize'] = 'medium';
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>無障礙字體縮放示範</title>
    <!-- 動態引入 CSS -->
    <link rel="stylesheet" href="<?php echo $_SESSION['textsize']; ?>.css">
</head>
<body>
    <div class="toolbar">
        文字大小：
        <a href="resize.php?s=small">小</a> |
        <a href="resize.php?s=medium">中</a> |
        <a href="resize.php?s=large">大</a>
    </div>
    <div class="content">
        <h1>歡迎來到無障礙示範網站</h1>
        <p>這裡展示如何透過 PHP 與 CSS 實現字體大小動態切換...</p>
        <!-- 更多內容 -->
    </div>
</body>
</html>

步驟 2：建立三組 CSS 檔案

small.css

body { font-size: 12px; line-height: 1.6; }
h1 { font-size: 1.8em; }
.content { max-width: 800px; margin: 0 auto; padding: 20px; }

medium.css

body { font-size: 16px; line-height: 1.7; }
h1 { font-size: 2.2em; }
.content { max-width: 800px; margin: 0 auto; padding: 20px; }

large.css

body { font-size: 22px; line-height: 1.8; }
h1 { font-size: 2.8em; }
.content { max-width: 800px; margin: 0 auto; padding: 20px; }

步驟 3：建立切換處理器 (resize.php)

<?php
session_start();
// 驗證參數合法性
$allowed = ['small', 'medium', 'large'];
$size = $_GET['s'] ?? 'medium';

if (in_array($size, $allowed)) {
    $_SESSION['textsize'] = $size;
}

// 導回來源頁面
$referer = $_SERVER['HTTP_REFERER'] ?? 'index.php';
header("Location: $referer");
exit;

三、進階優化建議

• Cookie 持久化：若需跨 Session 記住偏好，可同時設定 Cookie：setcookie('textsize', $size, time()+3600*24*30)
• AJAX 無刷新切換：搭配 JavaScript fetch API 呼叫後端，成功後動態替換 <link> 的 href，體驗更流暢。
• 相對單位：CSS 內部建議使用 rem 或 em，僅調整 html { font-size } 即可全域縮放，維護更容易。
• 無障礙屬性：按鈕加上 aria-label、role="button"，符合 WCAG 標準。

四、完整檔案結構

/project-root
├── index.php
├── resize.php
├── small.css
├── medium.css
└── large.css

五、總結

透過 PHP Session 搭配多組 CSS，只需少量程式碼即可實現完整的字體大小切換功能。這不僅提升網站無障礙等級，也展現對多元使用者群體的關懷。建議在專案初期就納入此類功能，讓網站真正做到普遍設計。