怎么修改网页字体大小(图文)
修改网页字体大小有多种方法，从临时调整到永久修改都可以实现。以下是详细的方法介绍：
styles.css:
1. 浏览器内置缩放功能（最简单）
快捷键方式：
放大：Ctrl + '+' (Windows/Linux) 或 Cmd + '+' (Mac) 缩小：Ctrl + '-' (Windows/Linux) 或 Cmd + '-' (Mac) 恢复默认：Ctrl + '0' (Windows/Linux) 或 Cmd + '0' (Mac)浏览器菜单方式：
Chrome: 设置 → 外观 → 字体大小 Firefox: 设置 → 常规 → 语言和外观 → 字体 Edge: 设置 → 外观 → 字体大小2. 使用浏览器开发者工具临时修改
方法一：Elements面板直接修改CSS
css
/* 在开发者工具中添加或修改CSS */ body { font-size: 18px !important; } /* 或者更具体的选择器 */ .content, .article, p { font-size: 16px !important; } h1 { font-size: 28px !important; } h2 { font-size: 24px !important; } h3 { font-size: 20px !important; }方法二：Console控制台修改
javascript
// 修改整个页面的基础字体大小 document.documentElement.style.fontSize = '18px'; // 修改body字体大小 document.body.style.fontSize = '16px'; // 修改特定元素的字体大小 document.querySelectorAll('p').forEach(p => { p.style.fontSize = '18px'; }); // 修改标题字体大小 document.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(header => { header.style.fontSize = 'calc(1em + 2px)'; });3. 使用浏览器扩展永久修改
创建自定义CSS扩展：
manifest.json:json
{ "manifest_version": 3, "name": "网页字体大小修改器", "version": "1.0", "content_scripts": [{ "matches": ["<all_urls>"], "css": ["styles.css"], "run_at": "document_start" }] }css
/* 全局字体大小调整 */ *:not([class*="icon"]):not(i) { font-size: 18px !important; line-height: 1.6 !important; } /* 特定元素调整 */ body, p, div, span, li { font-size: 18px !important; } h1 { font-size: 28px !important; } h2 { font-size: 24px !important; } h3 { font-size: 20px !important; } h4 { font-size: 18px !important; } /* 确保小图标不受影响 */ [class*="icon"], .fa, .glyphicon, .material-icons { font-size: inherit !important; }4. 使用用户脚本（Tampermonkey）
javascript
// ==UserScript== // @name 网页字体大小调整器 // @namespace http://tampermonkey.net/ // @version 1.0 // @description 自动调整网页字体大小 // @match https://*/* // @grant none // ==/UserScript== (function() { 'use strict'; // 创建控制面板 function createControlPanel() { const panel = document.createElement('div'); panel.id = 'font-size-control'; panel.innerHTML = ` <div style="position: fixed; top: 10px; right: 10px; background: rgba(0,0,0,0.8); color: white; padding: 10px; border-radius: 5px; z-index: 10000;"> <button onclick="changeFontSize(1)">A+</button> <button onclick="changeFontSize(-1)">A-</button> <button onclick="resetFontSize()">重置</button> </div> `; document.body.appendChild(panel); // 添加样式 const style = document.createElement('style'); style.textContent = ` #font-size-control button { margin: 2px; padding: 5px 10px; background: #4CAF50; border: none; color: white; cursor: pointer; border-radius: 3px; } `; document.head.appendChild(style); } // 字体大小调整函数 window.changeFontSize = function(delta) { let currentSize = parseFloat(document.documentElement.style.fontSize) || 16; document.documentElement.style.fontSize = (currentSize + delta) + 'px'; }; // 重置字体大小 window.resetFontSize = function() { document.documentElement.style.fontSize = ''; }; // 初始化控制面板 createControlPanel(); })();5. 使用Stylus扩展自定义CSS
安装Stylus浏览器扩展后，可以为特定网站创建自定义样式：css
/* 适用于所有网站的全局样式 */ @-moz-document url-prefix() { body, p, div, span { font-size: 18px !important; line-height: 1.6 !important; } h1 { font-size: 2em !important; } h2 { font-size: 1.8em !important; } h3 { font-size: 1.5em !important; } h4 { font-size: 1.2em !important; } /* 保持代码块原有大小 */ code, pre { font-size: 0.9em !important; } } /* 针对特定网站 */ @-moz-document domain("zhihu.com") { .ContentItem-title, .RichText { font-size: 18px !important; } }6. 使用Bookmarklet书签工具
创建书签，URL填写以下JavaScript代码：javascript
javascript:(function(){ var size = prompt('请输入字体大小(px):', '18'); if(size) { var style = document.createElement('style'); style.innerHTML = '*:not([class*="icon"]):not(i) { font-size: ' + size + 'px !important; }'; document.head.appendChild(style); } })();7. 修改特定网站字体
javascript
// 针对特定网站的字体调整 function adjustSpecificSite() { // 检查是否为目标网站 if(window.location.hostname.includes('blog.csdn.net')) { const style = document.createElement('style'); style.textContent = ` .article-content, .blog-content-box { font-size: 18px !important; line-height: 1.8 !important; } .article-title { font-size: 24px !important; } `; document.head.appendChild(style); } } // 页面加载后执行 document.addEventListener('DOMContentLoaded', adjustSpecificSite);8. 使用CSS媒体查询适配不同设备
css
/* 响应式字体大小调整 */ @media screen and (max-width: 768px) { body { font-size: 16px !important; } h1 { font-size: 24px !important; } } @media screen and (min-width: 769px) and (max-width: 1024px) { body { font-size: 18px !important; } h1 { font-size: 28px !important; } } @media screen and (min-width: 1025px) { body { font-size: 20px !important; } h1 { font-size: 32px !important; } }推荐方案
对于一般用户，推荐以下几种方案：- 临时查看：使用浏览器缩放功能（Ctrl +/-）
- 经常访问的网站：使用Stylus扩展自定义CSS
- 所有网站统一调整：使用Tampermonkey脚本
- 专业需求：开发浏览器扩展
更新时间：2025-12-16 10:56:28
上一篇：怎么修改网页源代码(图文)