网页显示和源代码显示不一致

最近在工作当中遇到了一个很有意思的问题。网页上显示的数据和F12当中的源代码显示不一致。这就导致爬虫程序爬下来的数据和他所显示的实际值变得不一样。

网页显示值：

20180825120826914.png

开发者工具中的值：

20180825120853998.png

大家可以很明显的看到。其中价格48380-48500 这一个数据 在代码中却为 96562-96822。这就很令人困惑了，为什么网页当中的显示值和代码中的数值不一样呢？

首先我们考虑了有可能的几种情况：

1、JavaScript更改了数值。

但是很明显不是，因为开发者工具加载的应该是已经运行过脚本后的实际数据了。即使通过ajax异步加载脚本，也没办法实现在页面中加载了脚本改变了数值而开发者工具的代码却没有加载改变。所以这一种可能被淘汰。

2、CSS更改了数值

但是CSS只是样式表只能更改样式并不能更改数据啊？
这个时候我注意到了这个div中含有的一个class:change_price 让我们看看这个样式

20180825122558619.png

看到这个样式只是使用了一个字体，我想大家可能已经明白了原因是什么了。接下来我们就来验证以下具体的原因，是不是真的因为这个字体的原因。

首先我们获取到这个文件。（具体的方法，可以自己在网上查阅。其实按照链接下下来就行了）

201808251229270.png

但是这个文件是EOT的格式，我的软件不支持这个于是我们先将他转换格式成我们能够打开的TTF。（转换方法，能在网上找到在线的转换器）

20180825123308783.png

然后使用fontforge打开这个文件。

然后我们就有了惊喜的发现。数字和他显示的字形发生了错位。

20180825123507274.png

具体原因：

简单来说，其实这种方法并没有改变后台的数据。而是更改了现实的字体。实际当中的数据数字，每一个都长得不一样。

0的样子变成了9 9的样子变成了4。于是你在网页上看到的数据和F12开发者工具当中看到的数据就变得完全不一样了。本质上的数据是一样的，比如在复现过程中只要去复制粘贴这个数据，你会发现他又变成了和F12当中的数据变成一致的了。

<span style="color:#f33b45;">不一致的原因：更改了字体的显示方式，0看起来是9 。</span>

<span style="color:#f33b45;">解决办法：参考他的字体文件 映射关系。将数据反向解析。</span>

实际上这个做法并不算高明，主要还是自己没有见过这种方法。

缺点主要在于只是想要解决这个问题其实很容易找规律发现：其中的映射关系：

48380-48500

96562-96822

很容易看出数字其实是一一对应的。其实可能用一些冷门的符号当做实际数值 可能 更加让人难看规律来一些。

以上 如果有更好的想法也欢迎大家一起交流。