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

时间:2014-05-09 00:27:11

标签: javascript css svg media-queries font-face

我开始在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的原始注释。 "注意,这会打破暗示!在其他操作系统中,字体不会像它那样尖锐。

    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');
    
        }
    }
    

1 个答案:

答案 0 :(得分:0)

在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的性能。