如果用户的设备是iOS，如何更改字体系列CSS [英] How to change the font family css if the user's device is iOS

问题描述

我正在使用特殊字体来显示内容.它适用于大多数设备，但不适用于iOS设备.因此，当用户使用Apple设备但其他设备正常显示时，我需要更改字体系列css.我该怎么办?

I'm using a special font to display content. It works on most devices but not on iOS devices. So I need to change the font family css when user has an Apple device but for others display normally. How can I do this?

我附上了一些伪代码:

if(IOS)  { html,body,h1,h2,h3,h4,h5 { line-height: 150%; font-family: "Open Sans", sans-serif}
}else{
html,body,h1,h2,h3,h4,h5 { line-height: 150%; font-family: "Noto Sans Sinhala", sans-serif}
}

推荐答案

一种解决此任务的方法是使用用户代理嗅探技术，例如:

One way to approach this task is using the User Agent sniffing technique, like so:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

因此，实际上是:

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (iOS) {
    // iOS specific styles
}
else {
    // other styles
}

我建议您在样式表文件中拥有所有样式，并且仅包括字体系列(并且仅样式会随设备而异).因此，您的完整代码应如下所示(假设此JavaScript位于html文件的开头):

I would suggest that you have all of your styles in a stylesheet file and only include the font-family (and only styles that change depending on the device). So your complete code could look something like this (assuming this JavaScript is in the head of your html file):

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (iOS) {
    document.write("<style>body { font-family: x }</style>");
}
else {
    document.write("<style>body { font-family: y }</style>");
}

您可以在此答案中了解有关检测iOS的更多信息.

You can read more about detecting iOS in this answer.

这篇关于如果用户的设备是iOS，如何更改字体系列CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！