1.对于IOS 手机系统,默认中文字体是Heiti SC.默认英文字体是Helvetica.默认数字字体是HelveticaNeue.无微软雅黑字体: 2.对于Android 手机系统,默认中文字体是Droidsansfallback.默认英文和数字字体是Droid Sans.无微软雅黑字体: 3.对于Winphone 手机系统,默认中文字体是Dengxian(方正等线体).默认英文和数字字体是Segoe.无微软雅黑字体. 以上三种不同的中文字体和微软雅黑一样,都是无衬线字体.综上所述,各个手机

一.font-family 使用无衬线字体 body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; } iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica 中文字体设置为华文黑体STHeiTi 默认数字字体是Helvetica Neue 需补充说明,华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT587

问题缘由:做文章详情页的时候,文字多了一点字体就放大了,真的是奇了怪了. 问题重现 一段文字的时候 两段文字的时候 很明显,字体放大了很多. 疑点 meta标签缩放的问题 最近正好遇到处理retain屏1px的问题,然后采用的是自动修改meta标签. /** * Created by jarjune on 2017/7/26. */ (function (doc, win) { var scale = 1.0; var ratio = 1; if (window.devicePixelRatio

最近做一个页面时,需要pc的页面在移动端浏览时保持pc的样式缩小.但是发现部分文字被放大了.看上去特别诡异.如下图 绿框是PC端查看时的正常样式,红框是移动端看的字体放大的诡异样式 是什么原因呢? 后来接触到了一个概念,终于了解了问题的本来面目.这个概念叫做 “Font Boosting”(文字爆炸) Font Boosting被称为字体提升,也被称为Text Autosizer,Font Inflation.是 Webkit 给移动端浏览器提供的一个特性:当我们在手机上浏览网页时,很可能因为原

本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发的,目前是Perfect2.0版本,关于Perfect框架,下方会详细的介绍.本篇博客会演示一个完整的Demo, 该Demo完全由Swift3.0开发,其中包括服务端和iOS客户端,数据库采用的是MySQL. 进一步说,本篇博客将会演示一个使用Swift3.0开发的记事本,当然该记事本的服务端和iO

一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本文深入讨论使用icon-font的的制作方法:在PS里面导出svg,制作字体图标.这种方法既有sprites图不需要浏览器发多次请求的优点,也有使用clip-path/svg矢量无损的优点,并且支持IE6及以上. 使用sprites图可以自行用PS将多个小图标放至一张图: sprites图的缺点是不

目录 前言 OAuth2.0简介 授权模式 (SimpleSSO示例) 使用Microsoft.Owin.Security.SimpleSSO模拟OpenID认证 通过authorization code授权模式申请令牌 通过implicit授权模式申请令牌 通过password模式申请令牌 通过client credentials模式申请令牌 后话 前言 之前有分享这个项目源码及简介,不过因为文字讲解太少,被和谐了.我重新总结下:   源码:https://github.com/zhoufei

一.html <div id="canvasArea" style="width:300px;height:200px;position:relative;"> <div style="width:300px;height:200px;background: #3083e1;position:absolute;top:0;left:0;z-index:1;text-align:center;line-height:200px;font-w

文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. HTML5 可以做什么 拍照 获取地理位置 手势 canvas 绘图和动画(硬件加速) localstorage,本地缓存 HTML5 动画效果 demo http://fff.cmiscm.com/#!/main CSS3 动画 http://isux.tencent.com/css3/inde

http://caibaojian.com/flexible-js.html 阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现方法: 通过JS来调整html的字体大小,而在页面中的制作稿则统一使用rem这个单位来制作.关键代码如下: ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc

我今年是由零基础开始入门的,刚好我第一家公司入职后就马上让我接手做ipad版的专题app了.(一入门就是移动端开发,是幸运也是艰辛的开始). 我是自学前端的,当然,对Bootstrap,JQuery mobile这2个UI框架肯定是熟悉他们是怎么使用,只是没必要再深入了.因为我当时应聘介绍自己懂这些框架都没有一家公司来招我,原因待会解释. 既然是零基础入门的话,那么我先分享下我该怎么学习? 我相信大部分人都了解一个房子的构造建成了吧,那么我用比如的方法来给自己去解释网站到底是个怎么回事? 后台其

最近忙着将项目内的jquery 2换成zepto 因为不想引用过多的zepto包,所以花了点时间 zepto真的精简了许多,源代码看着真舒服 正好项目内需要一个划屏插件,就用zepto写了一个 逻辑其实很简单,但没想到测试时,在老版本android设备浏览器上的touchmove有许多bug 做兼容倒是搞了一阵 效果图 样式1 样式2 调用 正常情况下应该是后台生成的html代码,但还是写了一套操作tab页的方法 调用简便如下: <link rel="stylesheet" hr

chrome,firefox提供了"Device Emulation"功能,可模拟常见的各种浏览设备 android ADT或ios Xcode附带的设备模拟器,或第三方在线测试工具www.browerstack.com Responsive Web Design:响应式/自适应网页设计 流式网格布局(Fluid:流式): 可伸缩的图片/文字 CSS3 Media Query技术,根据浏览设备的宽高调用不同的css ①允许用户缩放:head内声明viewport <head>

pygame开发PC端微信打飞机游戏 一.项目简介 1. 介绍 本项目类似曾经火爆的微信打飞机游戏.游戏将使用Python语言开发,主要用到pygame的API.游戏最终将会以python源文件game.py形式完成,只需要运行python game.py就可以进入游戏. 游戏最终效果截图如下: 2. 知识点 本实验中将介绍在Linux桌面环境下使用Python及pygame快速开发小游戏的方式.可以通过这个游戏入门pygame游戏开发. 3. 参考文档 代码参考 Kill-Console写的P

asp.net获取服务端和客户端信息 获取服务器名:Page.Server.ManchineName获取用户信息:Page.User 获取客户端电脑名:Page.Request.UserHostName获取客户端IP:Page.Request.UserHostAddress ]); )            clientInfos.Add("计算机/手机", "手机");        else            clientInfos.Add("计算

官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ 'Carousel' demo iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数. 使用iScroll时,DOM树的结构要足够

本篇主要讲解如何为sap business objects 的web intelligence报表组件新增字体.因为系统默认预设的字体对中文而言实在是太丑了,有的字体特喵的直接把中文变成方框框了! 一.系统环境: SAP BusinessObjects Business Intelligence (BI) 4.x Windows Server2008R2 示例字体:微软雅黑 二.操作步骤 1.首先要确保[微软雅黑]字体已经安装在Windows系统里了(“安装”指的是:ttf文件存放在这个目录下:

CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.根据具体图标在大图上的位置,给背景定位. CSS Sprites加速的关键,不是降低质量,而是减少个数. 做成Sprites的很大的原因是图片流量大,想象一下,如果将一些小图片做成字体模式进行显示,会不会很神奇呢?随着CSS3对字体

meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 1 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 忽略将页面中的数字识别为电话号码 1 <meta name="format-detection" content

记得2010年之前,公司的项目基本上都要用到报表,以前我们常用的方法就是针对客户的需求来定制化开发(基本上是死写代码)来实现,经常导致项目经常性的延期,因为客户的需求经常会变化,随着用户的使用认知度的提高,对报表的要求越来越高,导致程序员不停的修改代码来实现,效率不高.结束遥遥无期...非常的痛苦:当然市面上有很多报表开发工具可以实现,但是针对小公司来说采购一套这样的系统的成本也非常的高,所以我们决定自己来开发一套像目前的润乾.FineReport 这样的报表设计器,来实现快速的报表设计制作.

移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案很受欢迎. rem定义及浏览器支持情况 rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其