javascript - 适用于 Window Chrome 和 SEO 的最新 Font-Smooth 技术

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 上阅读更多内容.

我假设短语“break hinting”是在警告您 SVG 字体不支持这一点。

你为什么要这样做？

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

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