css 适配mac 字体,CSS:仅在mac上使用字体
如果您不介意使用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上使用字体相关推荐
- CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口
CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口 由于苹果手机上面刘海会遮挡住一些内容,所以我们在开发的时候需要进行一些适配 //使用padding-top的让内容往下挤,适配刘海屏 padd ...
- android 使用ios字体大小,ios和android上的字体大小不同
您将密度设置为1.0,并告诉Android的WebView在您以特定方式声明视口时不会缩放任何东西.您可以删除该视口声明,然后会导致图像缩放以及字体,或者可以基于用户运行应用程序的Android设备修 ...
- Powerline 字体安装 for Windows / Mac / Ubuntu
文章目录 系统字体安装 设置终端字体 VS Code PuTTY cmd MacOS Terminal 系统字体安装 # refer to https://github.com/powerline/f ...
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- css自定义字体转换工具_5种最佳CSS3字体工具
css自定义字体转换工具 自从将图形支持添加到浏览器以来,字体在网络上产生了最戏剧性的视觉影响. 几年前,不可能找到使用Arial,Verdana,Tahoma,Times New Roman或Geo ...
- 13 【精灵图 图标字体 CSS三角 鼠标样式 溢出省略号】
20.精灵图 20.1为什么需要精灵图? 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送 请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. ...
- CSS初识(三):CSS字体文本相关属性
属性 CSS属性有很多,不过常用的并不多,大概30个左右.请注意区别CSS属性和HTML属性. 按照功能大致分为以下几类: 字体有关属性 font-size: 设置字体大小,单位是px(像素):一些不 ...
- css pc和mobile,初识pc端和mobile端CSS适配利器—vw+rem+CSS locks
前言 大概五月份的时候,我下定决心写自己的博客系统,于是断断续续花了近一个月的时间琢磨Nestjs,写完了接口部分.六月份因为工作的原因就搁置了,说来也惭愧,直到九月中旬,才将它拾起.半个月后,后台部 ...
- html / CSS 自定义字体font 自己设置好看的特效字体
这篇文章的主题是CSS3属性 : @font-face 楼主很喜欢CSS3的一些新增属性,给我们前端程序员带来了非常很多福利,我们的页面也可以做的更加的美观. 直接放效果图吧,因为代码较长,放在最下面 ...
- css适配iphoneX
css适配iphoneX 前言 iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要 ...
最新文章
- AI用50个三角形画出抽象版蒙娜丽莎,有股后现代的感觉了 | 谷歌大脑出品
- Go语言初探gRPC服务
- 计算机二级mysql报名2020_关于2020年秋季全国计算机等级考试报名的通知
- 测试开发——flask视图函数与路由 实战重点
- 从包中导入类的使用 java
- 产业链加入爆料行列!2019年新iPhone:外形无变化 后置摄像头升级
- Laravel 2017 年度调查报告
- 机器学习导论--1.机器学习理论基础详解
- python 余弦值,Python向量余弦值 Python 求向量的余弦值操作
- idea创建vue模板
- 211大学计算机找工作,华为最青睐的5所大学,每年招聘大量毕业生,第一所只是211院校...
- 计算机术语中ict表示是什么意思,ICT是什么工作
- 2009 year English Inprovement for IT developments
- 详解非局部均值滤波原理以及用MATLAB源码实现
- 低成本的NAS方案靠谱吗?多种自建NAS方案的比较及各自特点分析
- Hexo阶段三 -- 将Hexo部署到github
- 厚屁股的 240Hz 次旗舰 — ROG 枪神 3 评测
- Java集成环信即时通讯(SpringBoot)
- 支付宝在线支付接口开发教程与总结
- 无序链表(顺序查找)和有序数组(二分查找)-基础实现-符号表(二)-数据结构和算法(Java)
热门文章
- 渗透测试/应急演练过程中metasploit制作木马连接失败问题排查
- 中南民族大学计算机组成原理实验,中南民族大学计算机组成原理试题及答案剖析.docx...
- 十个优秀的在线音乐分享网站
- Officescan防毒墙安装部署
- 从源码分析HashSet集合
- KMS激活工具原地址
- KITTI数据集简介与使用
- iso12233测试方法_详解ISO12233 Chart(分辨率测试标板)使用方法
- 基于 RT-Thread Studio的CPK-RA6M4 开发环境搭建指南
- [工业互联-8]:PLD编程快速概览、PLD五种编程语言与七款常见的PLC编程软件