如何为所有 IPAD 设备加载特定的字体

Posted

技术标签:

【中文标题】如何为所有 IPAD 设备加载特定的字体【英文标题】:How to load font face specific for All IPAD devices 【发布时间】:2014-11-16 10:40:21 【问题描述】:

如何加载特定的字体

对于所有 IPAD 设备... 1. IPAD 这应该只在所有 IPAD 设备 Safari 中加载 2.它应该在所有操作系统浏览器+ IPAD所有设备Safari中加载

CSS:

    1.//*IPAD this should load only in all IPAD Devices Safari
            @font-face 
            font-family:'Calibri';
              src: url('fonts/calibri.eot'); /*IE9 Compat Modes */
              src: url('fonts/calibri.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                 url('fonts/calibri.woff') format('woff'), /*Modern Browsers*/      
                  url('fonts/calibri.ttf') format('truetype'), /*Safari, android, ios */
                  url('fonts/calibri.svg#calibri') format('svg') /*Legacy iOS*/
            
            //*IPAD Devices Safari



           2. // This should load in all OS browsers + IPAD all Devices Safari
            @font-face 
            font-family:'HelveticaNeueLT Std Lt';
            src: url('fonts/HelveticaNeueLTStd-Lt.eot'); /* IE9 Compat Modes */
            src: url('fonts/HelveticaNeueLTStd-Lt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), /* Modern Browsers */
                 url('fonts/HelveticaNeueLTStd-Lt.ttf')  format('truetype'), /* Safari, Android, iOS */
                 url('fonts/HelveticaNeueLTStd-Lt.svg#HelveticaNeueLT Std Lt') format('svg') /* Legacy iOS */
            
            // this should load in all OS browsers + IPAD all Devices Safari

【问题讨论】:

您将需要 javascript 或 jquery 来检测 ipad 并添加字体 你能建议使用 wat 吗 【参考方案1】:

您应该可以通过检查所用浏览器中的user agent 字符串来做到这一点。

使用 JavaScript,您可以读取浏览器的 UA 字符串,然后检查在 Apple 浏览器中找到的常见字符串,并仅为它们提供可选代码。

<script type="text/javascript">
$(document).ready(function() 
  //check for iOS
  var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
  var is_safari_or_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);

  var ipad_only_fonts = "font-family:'Calibri'; url('fonts/calibri.woff') format('woff'), url('fonts/calibri.ttf') format('truetype'), url('fonts/calibri.svg#calibri') format('svg')";
  var all_apple_device_fonts = "font-family:'HelveticaNeueLT Std Lt'; url('fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), url('fonts/HelveticaNeueLTStd-Lt.ttf') format('truetype'), url('fonts/HelveticaNeueLTStd-Lt.svg#HelveticaNeueLT Std Lt') format('svg')";
  if(is_uiwebview || is_safari_or_uiwebview) 
    // iphone/ipad/ipod detected

    // Add your fonts here
  
);
</script>

adding CSS to your pages via Javascript 有多种方法,但您可以通过以下摘录来实现您的要求。

<script type="text/javascript">
$(document).ready(function() 
  //check for iOS
  var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
  var is_safari_or_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);

  var is_uiwebview_ipad = /(iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
  var is_safari_or_uiwebview = /(iPad).*AppleWebKit/i.test(navigator.userAgent);

  if(is_uiwebview_ipad || is_safari_or_uiwebview_ipad) 
    // ipad detected
    $('body').css('@font-face', ipad_only_fonts); 
  
  if(is_uiwebview || is_safari_or_uiwebview) 
    // iphone/ipod detected
    $('body').css('@font-face', ipad_only_fonts); 
  
);
</script>

免责声明:我尚未在实际设备上对此进行测试,但它应该工作!

【讨论】:

以上是关于如何为所有 IPAD 设备加载特定的字体的主要内容,如果未能解决你的问题,请参考以下文章

iPad上字体的亚像素渲染

连接多个设备时如何为特定设备运行 vts

基于设备的字体类型和颜色

如何为 iOS 应用程序的不同设备设置不同的启动文件(xib,而不是启动图像)

如何为我的网站检测移动设备 [重复]

如何为拥有多个设备的用户管理 APN 令牌?