简体   繁体   中英

Latest Font-Smooth technology for Window Chrome and SEO

I have been starting to use below method for smooth font in webkit browser. Well, when I say webkit browsers, I meant Chrome on Windows, not safari, because safari renders font smooth enough. If possible, I would like to make it work for Opera as well, because Opera just became webkit based browser. Anyhow, I have 3 questions:

  1. How to detect Chrome browser on windows only? I only need to apply the bottom style to Windows Chrome.

  2. I use svg font for titles only. Can search engine(mainly Google) find svg text? Is it good for SEO? One of the reason I asked is because the font on my games page are not being highlighted when I select them using Ctrl+F or mouse. It's just weird in Chrome. www.comc.com/Challenges/Default.aspx (you have to sign up)

  3. What does this "break hinting" mean exactly? This is the original note from using the css at bottom. "Note, that will break hinting! In other OS-es font will be not as sharp as it could be"

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

Detecting Chrome on Windows

Probably the best browser-detect for chrome on Windows is

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

SVG fonts and SEO

When you import an SVG font, it's just a font. It's the same as any other @font-face rule. It doesn't affect SEO, since the plain text is still readable by crawl-bots.

Hinting

Font hinting is a technology which uses algorithms to guess how the normal shape of glyphs should be adjusted to best fit the raster (eg pixel grid) of the display. You can read more on wikipedia .

I assume the phrase "break hinting" is warning you that SVG fonts don't support this.

Why are you doing this anyway?

To be blunt, Google Chrome on Windows has terrible font rendering. Every Chrome user has, by using Chrome, signed up for that.

Also, I believe Chrome will, at some stage, fix their font rendering. When that happens, this code is worse than redundant: you will be degrading the performance of Chrome by forcing SVG fonts instead of WOFFs.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM