如何加载特定字体
对于所有 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
最佳答案
您应该可以通过检查 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>
免责声明:我还没有在实际设备上测试过它,但它应该可以工作!
关于ios - 如何为所有 IPAD 设备加载特定字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26956034/