适用于 Window Chrome 和 SEO 的最新字体平滑技术

Question

我已经开始在 webkit 浏览器中使用以下方法来平滑字体。好吧，当我说 webkit 浏览器时，我指的是 Windows 上的 Chrome，而不是 safari，因为 safari 使字体足够平滑。如果可能的话，我想让它也适用于 Opera，因为 Opera 刚刚成为基于 webkit 的浏览器。 无论如何，我有 3 个问题：

1. 如何仅在 Windows 上检测 Chrome 浏览器？我只需要将底部样式应用到 Windows Chrome。

2. 我只对标题使用 svg 字体。搜索引擎（主要是谷歌）可以找到 svg 文本吗？对SEO有好处吗？我问的一个原因是因为当我使用 Ctrl+F 或鼠标选择游戏页面上的字体时，它们没有被突出显示。这在 Chrome 中很奇怪。 www.comc.com/Challenges/Default.aspx（您必须注册）

3. 这个“中断提示”到底是什么意思？这是在底部使用 css 的原始注释。 “注意，这会破坏提示！在其他 OS-es 中，字体不会那么清晰”

   var winxp = navigator.userAgent.indexOf('Windows NT 5.1'),

   winvs = navigator.userAgent.indexOf('Windows NT 6.0'),
   
   win7 = navigator.userAgent.indexOf('Windows NT 6.1'),
   
   win8 = navigator.userAgent.indexOf('Windows NT 6.2');
   
   
   if ($(winxp > 0) || $(winvs > 0) || $(win7 > 0) || $(win8 > 0)) {
       $('<link rel="stylesheet" type="text/css" href="/css/fontello-windows.css?25"/>').appendTo('head');
   };
   
   
   
   @font-face { 
      font-family: 'CardoRegular';
       src: url('../fonts/Cardo104s-webfont.eot');
       src: url('../fonts/Cardo104s-webfont.eot?#iefix') format('embedded-opentype'),
            url('../fonts/Cardo104s-webfont.woff') format('woff'),
            url('../fonts/Cardo104s-webfont.ttf') format('truetype'),
            url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
       font-weight: normal;
       font-style: normal;
   }
   
   @media screen and (-webkit-min-device-pixel-ratio:0) {
       @font-face {
           font-family: 'CardoRegular';
           src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');
   
       }
   }
   

Answer 1

在 Windows 上检测 Chrome

Windows 上最好的 chrome 浏览器检测可能是

/Chrome/.test(navigator.userAgent) && /win32/.test(navigator.platform)

SVG 字体和 SEO

当您导入 SVG 字体时，它只是一种字体。它与任何其他 @font-face 规则相同。它不会影响 SEO，因为抓取机器人仍然可以读取纯文本。

提示

字体提示是一种技术，它使用算法来猜测应如何调整字形的正常形状以最适合显示器的光栅（例如像素网格）。您可以在wikipedia 上阅读更多内容。

我认为“中断提示”这个短语是在警告您 SVG 字体不支持这一点。

你为什么要这样做？

坦率地说，Windows 上的 Google Chrome 的字体渲染很糟糕。每个 Chrome 用户都通过使用 Chrome 进行了注册。

另外，我相信 Chrome 会在某个阶段修复它们的字体渲染。发生这种情况时，这段代码比多余的代码更糟糕：您将通过强制使用 SVG 字体而不是 WOFF 来降低 Chrome 的性能。