司法考试官网“大小字”问题浅析

概要

近日，临近法考主观题成绩公布，微博法考圈出现了一个爆火的词条——“字体变大变小”

使用iphone的考生用safari浏览器访问司法考试官网，在个人信息处会发现在自己有三处文字被莫名其妙变大了。

而使用安卓机的考生则没有出现以上问题，由于历年“法考玄学论”频出，我们决定对此事件进行技术性、科学性的分析。

猜测

首先，直观判断CSS有些属性在safari，chrome等浏览器中是默认打开的，chrome在不同平台用的渲染引擎的内核不一样，safari的内核为webkit，由于苹果的政策，Chrome for iOS 以及 iOS 上几乎所有浏览器用的也都是 webkit内核。

其次通过翻阅css-trick，找到了一篇名为“文本渲染”的文章，原文地址：

https://css-tricks.com/almanac/properties/t/text-rendering/

文章指出有一个 CSS 属性，text-rendering，在 Safari 中默认设置为optimizeSpeed，在这个属性下有四个可能值，分别为：

1、auto（默认）– 浏览器会对绘制文本时何时优化速度、易读性和几何精度进行有根据的猜测。请注意，不同的浏览器对此值的解释不同。

2、optimizeSpeed – 浏览器在绘制文本时强调渲染速度而不是易读性和几何精度。它禁用字距调整和连字。

3、optimizeLegibility – 浏览器强调易读性而不是渲染速度和几何精度。这允许使用某些字体的字体文件中可能包含的特殊字距调整和可选连字信息。

4、geometricPrecision – 浏览器强调几何精度，而不是渲染速度和易读性。字体的某些方面（如字距调整）不会线性缩放，因此使用这些字体的文本看起来不错。缩放 SVG 字体时，浏览器会计算像素大小，然后舍入到最接近的整数。该属性允许更流畅的缩放。注意：只有 WebKit 浏览器应用此流体值，Gecko 会像处理.geometricPrecisiongeometricPrecisionoptimizeLegibility

例如
text-rendering:optimizeLegibility;

可以非常直观的看到两者的区别，但这只是猜测，并没有证实“大小字”问题是否从属于这个CSS属性的特性问题。所以还是要从网站入手。

初步分析

由于刚开始没有法考账号，我们无法从出现问题的页面进行分析，所以便从普通浏览者可访问到的页面进行了初步分析。

有些文字设置了font-size，pc 端没问题，但是在移动端，它没适配，只是靠浏览器的自动缩放，保证也一个 view 中能看到所有页面内容，直白讲就是页面整体被浏览器按窗口比例缩放了。安卓平台的Chrome内核和iOS平台的Chrome内核不一样，不同内核的渲染机制也不同，故会出现文字siza显示问题。

这部分的字体大小是18px，在pc上明显跟左边的字体大小不一样。移动端就不一样了。明显是缩放了。

看到这个content="webkit"，我们也只能是默默说一句“卧槽”。

彩蛋？

在使用安卓机找问题的时候，我们发现了某个页面的文字显示有重影，如下图所示：

究其原因非常搞笑，此前端页面竟然固定了分辨率和字体高度，导致了换行重叠。

可边缘玄学问题频出，“大小字”问题还是没有找到原因，于是我们联系到一位考生得到了测试账号。

柳暗花明

我们登录以后，在页面出现“大小字”问题的地方进行了分析，通过比对存在“大小字”问题的区域和其他区域的前端代码有些许不同。

存在问题的html td标签 多了个colspan属性，而不存在问题的地方则没有这个属性。

通过对colspan属性所产生的问题进行检索找到了以下文章：

“由于 td 的 colspan导致的问题“

https://www.cnblogs.com/Jinglecat/archive/2006/09/23/512763.html

“Weird behaviour when rotating iPhone for TDs with colspan”

https://stackoverflow.com/questions/6652764/weird-behaviour-when-rotating-iphone-for-tds-with-colspan

因此，”大小字“问题可以确定为：

在 Android 设备浏览器中，colspan 属性会被解析为将单元格内的文字跨越多行显示，而在 某些iOS 设备浏览器中，浏览器会默认将单元格内的文字显示在一行中，因此当单元格中的文本超过一行时，iOS 浏览器会将其扩展为多行，并且每行的文字会变得更粗更大，以填满整个单元格。

这是由于 iOS 浏览器的兼容性策略，以防止用户意外地跨越多行显示单元格。而在 Android 浏览器中，colspan 属性被解析为将单元格内的文字跨越多行显示，因此文字会正常显示。

根本原因还是前文所提到的安卓平台浏览器内核和iOS平台浏览器内核不同，渲染机制也不同。

总结

在技术层面没什么好总结的，因为前端开发人员的”不专业“引发了数十万法考生的焦虑不安，实属无趣。

在法考层面，借用微博网友@想象竞合99发表的观点作为结语吧！

”法考仅仅是个考试而已，但是却被网络搅和成一门玄学。这其中掺杂着利益和欲望，让22级的法考生更加的焦躁不安。但是不要忘记，你是法律人。法律人说话要凭证据，看待问题要讲逻辑和常识，遇到问题要客观、理性，而不是忘记上述一切。“