网站使用谷歌“ROBOTO”字体（解决ios1号和0号宽度不等问题）

网站使用谷歌“ROBOTO”字体（解决ios1号和0号宽度不等问题）in开发中发现数字0和1在mac上占用的宽度不一样，网上查询需要使用等宽字体，但是浏览器默认支持的等宽字体中文难看，所以立马引入了谷歌的字体渲染。最近在写一个移动端web项目，设计师设计的页面效果图使用的是GoogleRobotoFont。RobotoFont是谷歌为Android4.0Ice-CreamSandwich平台设计的一款全新的san-serif字体集。在css中，我直接使用了如下代码：body{font-family:'Roboto',RobotoLt;}测试页面时，在Android平台下渲染出Roboto字体，但在iphone5s下出现该字体。生效的情况。我按照谷歌官方的quickexample代码直接调用了谷歌的在线字体库，发现还是没有效果，也在stackoverflow上发了个问题。后来在谷歌搜索引擎中找到这篇文章：HowtoUseTheGoogle'sRobotoFontEverywhere可以直接在上面的链接中阅读文章。我的解决方案是遵循文章中的想法。如果你看不懂英文，那你可以看看我下面的中文解决步骤。从FontSquirrelRoboto字体页面下载字体包。在打开的页面中选择“Webfontkit”，然后在打开的选项页面下点击“DOWNLOAD@FONT-FACEKIT”下载压缩包。下载完成后，解压到当前文件夹，可以看到解压后的网页字体目录。打开这个目录，你会发现很多都是Roboto字体。您可以直接在网页大小中选择您要使用的字体，上传到您网站的相关目录中。当然，您还必须添加一段css3@font-face代码，以将字体嵌入和扩展到您的网站。代码如下：（注意src路径一定要根据个人情况确定，不是下面硬编码的代码。);)1@font-face{2font-family:'Roboto';3src:url('Roboto-Regular-webfont.eot');4src:url('Roboto-Regular-webfont.eot?#iefix')格式('embedded-opentype'),5url('Roboto-Regular-webfont.woff')格式('woff'),6url('Roboto-Regular-webfont.ttf')格式('truetype'),7url('Roboto-Regular-webfont.svg#RobotoRegular')格式('svg');8font-weight：正常；9font-style:normal;10}1112//如果想扩展更多的字体库，可以参照上面的代码。官方展示示例安装WebfontsWebfonts受所有主要浏览器平台的支持，但方式不尽相同。目前有四种不同的字体格式必须包含在内才能面向所有浏览器。这包括TTF、WOFF、EOT和SVG.1。上传您的网络字体您必须将您的网络字体套件上传到您的网站。它们应该与您的CSSfiles.2在同一目录中或附近。包括webfont样式表一个特殊的CSS@font-face声明可帮助各种浏览器选择所需的适当字体，而不会给您带来一堆麻烦。通过阅读有关此语法的Fontspring博客文章了解有关此语法的更多信息。它的代码如下：@font-face{font-family:'MyWebFont';src:url('WebFont.eot');src:url('WebFont.eot?iefix')格式('eot'),url('WebFont.woff')格式('woff'),url('WebFont.ttf')格式('truetype'),url('WebFont.svg#webfont')format('svg');}我们已经开始生成给你的代码。您所要做的就是链接到HTML中的样式表，如下所示：3。修改您自己的样式表要利用您的新字体，您必须告诉您的样式表使用它们。查看上面的原始@font-face声明，找到名为“font-family”的属性。链接的名称将是您用来引用字体的名称。在要更改的选择器内的“font-family”属性中将该webfont名称添加到字体堆栈中。例如：p{font-family:'MyWebFont',Arial,sans-serif;}4。测试让网络字体跨浏览器工作可能很棘手。如果您发现字体未在特定浏览器中加载，请使用边栏中的信息来帮助您。解决字体外观问题在让您的网络字体加载到您的新网站时遇到问题？这里有一些提示来解决可能的问题。字体不显示在任何浏览器中运行这听起来像是您需要处理管道问题。您要么没有将字体上传到正确的目录，要么没有在CSS中正确链接字体。如果您已确认所有这些都是正确的，但仍有问题，请查看您的.htaccess文件并查看请求是否被拦截。iPhone或iPad中未加载字体这里最常见的问题是您正在为来自IIS服务器的字体。IIS拒绝提供具有未知MIME类型的文件。如果是这种情况，您必须在服务器设置中将SVG的MIME类型设置为“image/svg+xml”。如果您需要帮助，请按照Microsoft的这些说明进行操作。Firefox中未加载字体此失败的主要原因是什么？您仍在使用早于3.5的Firefox版本。所以已经升级了！如果不是这样，那么您很可能提供来自不同域的字体。Firefox要求所有字体资源都来自同一个域。大号很明显，您可能需要将WOFF添加到您的MIME类型列表中（如果您通过IIS提供服务。）IE中未加载字体您是在实际的Windows计算机上查看InternetExplorer，还是在使用Adob??e等服务作弊浏览器实验室？许多这些屏幕截图服务不会为IE呈现@font-face。最好在真机上进行测试。IE9中无法加载字体IE9与Firefox一样，需要从与网站相同的域提供字体。确保是这样。参考：https://www.cnblogs.com/shuma...