我可以从浏览器更改查看页面源代码部分的大小或字体吗？答案

【问题标题】：Can I change the size or font in the view page source section from a browser?我可以从浏览器更改查看页面源代码部分的大小或字体吗？
【发布时间】：2012-05-04 14:31:33
【问题描述】：

有一个小问题可能会不时让我烦恼（如果其他人也有同样的感觉，那就别想了）。每次我从任何浏览器使用查看页面源时，文本总是变得又丑又小（我的电脑分辨率为 1920x1080，特别是 17 英寸，这使得字母非常小且难以看到）。有没有办法从任何浏览器更改查看页面源部分的字体和大小？（例如 Chrome）

我知道我可以通过鼠标滚动或“ctrl”+“+”来放大页面，但这并不是我真正想要解决的方法。

谢谢

【问题讨论】：

FWIW：在 Chrome 中使用 CTRL/CMD +/- 缩放确实有效，但它也会影响页面本身，因此当您关闭源代码并返回时，整个站点会变小/变大。这使得使用起来非常令人沮丧，而且不是一个好的解决方案。

标签： google-chrome fonts

【解决方案1】：

从 Chrome 32.0.1700.76 开始，custom.css 无法按如下所述工作。

请在此处查看更新的答案： Custom.css has stopped working in 32.0.1700.76 m Google Chrome update

老办法如下：

转到以下目录：

%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\

苹果机：

~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

并打开Custom.css 文件。如果不存在，则创建一个。

添加以下行：

body.platform-windows .monospace, 
body.platform-windows .source-code, 
td.webkit-line-content {
  font-size: 15px !important;
  font-family: Consolas, Lucida Console, monospace !important;
  tab-size: 2;
}

您所做的只是自定义 Chrome 内部使用的类。 .monospace 类是不言而喻的。 .source-code 类会影响开发人员工具 (F12) 中的项目。您正在寻找的是td.webkit-line-content，当您选择View page source 时，它会将样式应用于订单项。

您还可以通过为td.webkit-line-number 添加样式来编辑行号，还可以通过调整div.webkit-line-gutter-backdrop 的样式来编辑行号背景。

干杯。

【讨论】：

谢谢。当我不小心卸载了 Chrome 用于查看源对话框的任何默认字体时，我保存了我的培根。这应该是正确的答案，但是，OP 知道什么？！
从 Chrome 33 开始，对覆盖样式表的支持已被删除。请参阅：reddit.com/r/chrome/comments/1ymfgw/…

【解决方案2】：

在 linux 平台 (Ubuntu) 上，Custom.css 文件位于文件夹中：

~/.config/google-chrome/Profile #/User Stylesheets/Custom.css

【讨论】：

谢谢，非常感谢 :)

【解决方案3】：

正如 Jeff Johnson 所说 - 对于 Mac，样式表位于：

~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css

【讨论】：

谢谢，非常感谢 :)

【解决方案4】：

您可以指定您喜欢的编辑器从 IE 和 FireFox 查看源代码。

View Webpage Source Code in Your Favorite Text Editor – Firefox

Use an Alternate Source Viewer with IE

【讨论】：