在网站中使用谷歌“ROBOTO”字体（解决ios数字1和0大小不等宽问题）

在网站中使用谷歌“ROBOTO”字体（解决ios数字1和0大小不等宽问题）

在开发中发现在mac上数字0和1所占的宽度不一样，网上查询需要用到等宽字体，但是浏览器支持的默认几种等宽字体中文很难看，随即引入谷歌的字体进行渲染。

最近在写一个移动端的web项目，designer设计的页面效果图就是使用Google Roboto Font。The Roboto Font 是Google为Android 4.0 Ice-Cream Sandwich platform而设计的，是一个新的san-serif字集。

在css中，我直接使用了如下的代码：

body{font-family:'Roboto',Roboto Lt;}

页面测试时，Roboto字体在Android Platform下面是渲染出来了，但是在iphone 5s下面则出现字体不生效的情况。

我直接按照Google官方的quick example code来调用这个Google的在线字体库，但是发现还是没有效果，同时也在stackoverflow发了问题。

后来，在Google Search Engine中找到了这篇文章:How to Use The Google’s Roboto Font Everywhere

你可以直接看上面链接中的文章，我的解决办法就是按照文中的思路来实现的。如果你看不懂英文，那么你可以看看我下面的中文解决步骤。

1. 下载字体包，链接是 FontSquirrel Roboto font page。

2. 在打开的页面中，选择“Webfont kit”,然后你点击打开的选项页下面的"DOWNLOAD@FONT-FACE KIT"进行压缩包下载。

3. 下载完成之后，解压到当前文件夹，你可以看到解压出来的web fonts目录，打开该目录你会发现里面很多都是Roboto的各种字体。你直接选择一个你想要用在web size的上传到你的网站相关目录下面即可，当然，你还必须要添加一段css3 @font-face代码来进行嵌入扩展的字体到你的站点。代码如下：（注意，src path必须是根据你个人的具体情况来定，不是下面写死的代码。）

4. [](javascript:void(0)?

    1 @font-face {
        
    2     font-family: 'Roboto';
    3     src: