如果您不介意使用JavaScript和jQuery,则可以使用jQuery client plugin检测操作系统,然后设置字体。它似乎是旧东西,但它适用于jQuery 1.3.2,如果它适用于jQuery 1.6.1,我不会感到惊讶。

if($.client.os == 'Mac')

$('body').css('font-family',"'Looks good in Mac'")

else if($.client.os == 'Windows')

$('body').css('font-family',"'Looks good in Windows'")

else if($.client.os == 'Linux')

$('body').css('font-family',"'Looks good in Linux'")

您可以替换body任何CSS选择器,即使它不是由浏览器的支持,它可能是由jQuery的支持。

完全jquery.client.js

(function() {

var BrowserDetect = {

init: function() {

this.browser = this.searchString(this.dataBrowser) || "An unknown browser";

this.version = this.searchVersion(navigator.userAgent)

|| this.searchVersion(navigator.appVersion)

|| "an unknown version";

this.OS = this.searchString(this.dataOS) || "an unknown OS";

},

searchString: function (data) {

for (var i=0;i

var dataString = data[i].string;

var dataProp = data[i].prop;

this.versionSearchString = data[i].versionSearch || data[i].identity;

if (dataString) {

if (dataString.indexOf(data[i].subString) != -1)

return data[i].identity;

}

else if (dataProp)

return data[i].identity;

}

},

searchVersion: function (dataString) {

var index = dataString.indexOf(this.versionSearchString);

if (index == -1) return;

return parseFloat(dataString.substring(index+this.versionSearchString.length+1));

},

dataBrowser: [

{

string: navigator.userAgent,

subString: "Chrome",

identity: "Chrome"

},

{ string: navigator.userAgent,

subString: "OmniWeb",

versionSearch: "OmniWeb/",

identity: "OmniWeb"

},

{

string: navigator.vendor,

subString: "Apple",

identity: "Safari",

versionSearch: "Version"

},

{

prop: window.opera,

identity: "Opera"

},

{

string: navigator.vendor,

subString: "iCab",

identity: "iCab"

},

{

string: navigator.vendor,

subString: "KDE",

identity: "Konqueror"

},

{

string: navigator.userAgent,

subString: "Firefox",

identity: "Firefox"

},

{

string: navigator.vendor,

subString: "Camino",

identity: "Camino"

},

{ // for newer Netscapes (6+)

string: navigator.userAgent,

subString: "Netscape",

identity: "Netscape"

},

{

string: navigator.userAgent,

subString: "MSIE",

identity: "Explorer",

versionSearch: "MSIE"

},

{

string: navigator.userAgent,

subString: "Gecko",

identity: "Mozilla",

versionSearch: "rv"

},

{ // for older Netscapes (4-)

string: navigator.userAgent,

subString: "Mozilla",

identity: "Netscape",

versionSearch: "Mozilla"

}

],

dataOS : [

{

string: navigator.platform,

subString: "Win",

identity: "Windows"

},

{

string: navigator.platform,

subString: "Mac",

identity: "Mac"

},

{

string: navigator.userAgent,

subString: "iPhone",

identity: "iPhone/iPod"

},

{

string: navigator.platform,

subString: "Linux",

identity: "Linux"

}

]

};

BrowserDetect.init();

window.$.client = { os : BrowserDetect.OS, browser : BrowserDetect.browser };

})();

css 适配mac 字体,CSS:仅在mac上使用字体相关推荐

  1. CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口

    CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口 由于苹果手机上面刘海会遮挡住一些内容,所以我们在开发的时候需要进行一些适配 //使用padding-top的让内容往下挤,适配刘海屏 padd ...

  2. android 使用ios字体大小,ios和android上的字体大小不同

    您将密度设置为1.0,并告诉Android的WebView在您以特定方式声明视口时不会缩放任何东西.您可以删除该视口声明,然后会导致图像缩放以及字体,或者可以基于用户运行应用程序的Android设备修 ...

  3. Powerline 字体安装 for Windows / Mac / Ubuntu

    文章目录 系统字体安装 设置终端字体 VS Code PuTTY cmd MacOS Terminal 系统字体安装 # refer to https://github.com/powerline/f ...

  4. 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. css自定义字体转换工具_5种最佳CSS3字体工具

    css自定义字体转换工具 自从将图形支持添加到浏览器以来,字体在网络上产生了最戏剧性的视觉影响. 几年前,不可能找到使用Arial,Verdana,Tahoma,Times New Roman或Geo ...

  6. 13 【精灵图 图标字体 CSS三角 鼠标样式 溢出省略号】

    20.精灵图 20.1为什么需要精灵图? 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送 请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. ...

  7. CSS初识(三):CSS字体文本相关属性

    属性 CSS属性有很多,不过常用的并不多,大概30个左右.请注意区别CSS属性和HTML属性. 按照功能大致分为以下几类: 字体有关属性 font-size: 设置字体大小,单位是px(像素):一些不 ...

  8. css pc和mobile,初识pc端和mobile端CSS适配利器—vw+rem+CSS locks

    前言 大概五月份的时候,我下定决心写自己的博客系统,于是断断续续花了近一个月的时间琢磨Nestjs,写完了接口部分.六月份因为工作的原因就搁置了,说来也惭愧,直到九月中旬,才将它拾起.半个月后,后台部 ...

  9. html / CSS 自定义字体font 自己设置好看的特效字体

    这篇文章的主题是CSS3属性 : @font-face 楼主很喜欢CSS3的一些新增属性,给我们前端程序员带来了非常很多福利,我们的页面也可以做的更加的美观. 直接放效果图吧,因为代码较长,放在最下面 ...

  10. css适配iphoneX

    css适配iphoneX 前言 iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要 ...

最新文章

  1. AI用50个三角形画出抽象版蒙娜丽莎,有股后现代的感觉了 | 谷歌大脑出品
  2. Go语言初探gRPC服务
  3. 计算机二级mysql报名2020_关于2020年秋季全国计算机等级考试报名的通知
  4. 测试开发——flask视图函数与路由 实战重点
  5. 从包中导入类的使用 java
  6. 产业链加入爆料行列!2019年新iPhone:外形无变化 后置摄像头升级
  7. Laravel 2017 年度调查报告
  8. 机器学习导论--1.机器学习理论基础详解
  9. python 余弦值,Python向量余弦值 Python 求向量的余弦值操作
  10. idea创建vue模板
  11. 211大学计算机找工作,华为最青睐的5所大学,每年招聘大量毕业生,第一所只是211院校...
  12. 计算机术语中ict表示是什么意思,ICT是什么工作
  13. 2009 year English Inprovement for IT developments
  14. 详解非局部均值滤波原理以及用MATLAB源码实现
  15. 低成本的NAS方案靠谱吗?多种自建NAS方案的比较及各自特点分析
  16. Hexo阶段三 -- 将Hexo部署到github
  17. 厚屁股的 240Hz 次旗舰 — ROG 枪神 3 评测
  18. Java集成环信即时通讯(SpringBoot)
  19. 支付宝在线支付接口开发教程与总结
  20. 无序链表(顺序查找)和有序数组(二分查找)-基础实现-符号表(二)-数据结构和算法(Java)

热门文章

  1. 渗透测试/应急演练过程中metasploit制作木马连接失败问题排查
  2. 中南民族大学计算机组成原理实验,中南民族大学计算机组成原理试题及答案剖析.docx...
  3. 十个优秀的在线音乐分享网站
  4. Officescan防毒墙安装部署
  5. 从源码分析HashSet集合
  6. KMS激活工具原地址
  7. KITTI数据集简介与使用
  8. iso12233测试方法_详解ISO12233 Chart(分辨率测试标板)使用方法
  9. 基于 RT-Thread Studio的CPK-RA6M4 开发环境搭建指南
  10. [工业互联-8]:PLD编程快速概览、PLD五种编程语言与七款常见的PLC编程软件