你见过html页面上'x'字符变成打印机图标么?一般人应该没有. -----------------------诡异bug----------------------- 今天测试报了一个bug,说页面上'x'变成了打印机,之前从来没遇到过~~ 我看了看我这的,正常啊~又去虚拟机下windows看了下,也正常啊~ 诡异,开始去百度.发现有人在百度知道提了问题~第一个答案,瞎扯. 不过下边有个说,是因为用了微软雅黑字体的原因. (#‵′)靠,微软雅黑还有这个bug?下的我赶紧去试了试,然并卵,这人也

一.补充知识:PNG.IconFont.SVG理论 PNG为位图,是由不同的排列和染色的像素点组成的图像,位图的扩大实质是增加单个像素点的大小,故而导致在不同分辨率表现非常糟糕. SVG为可缩放矢量图,它不会像位图一样因为缩放而让图片质量下降,在不同分辨率的表现都一样清晰. IconFont是WebFont形式的图标,可以把他认为就是WebFont,制作来自于SVG矢量图,在不同分辨率的表现都一样清晰. 图标类型 构成 优势 劣势 PNG 独立像素点 可以实现各种色彩及真实画面的复现 体积比较大

很多国外的网站,访问的时候可以看到,页面先是大面积白一下,然后恢复正常.原因是网页上用到了 webfont,这些页面很多情况都是直接引用 google 的 webfont 地址,中华大局域网下,由于网络原因,页面虽已经全部加载,引用的 webfont 资源却还未下载成功,这就导致了使用了 webfont 的内容呈现空白状态,没有被渲染出来. 如,访问该网站:http://zurb.com/playground/foundation-icon-fonts-3 为啥国内很少有这种事儿发生?英文字符并

1 背景 最近因为一些个人私事导致好久没写博客了,多事之年总算要过去了,突然没了动力,所以赶紧先拿个最近项目中重构的一个小知识点充下数,老题重谈. 在我们App开发中大家可能都会有过如下痛疾(程序员和设计妹妹注意喽): 好多小的图标好烦人,又占体积还要考虑分辨率,一拉伸就模糊等. 同一个图标不同状态还有不同颜色的多张. 总是幻想IOS.Android.Web等对于一个图标只切一次图多好. 如果你有过类似的痛疾那么下面讨论的故事就是一个完美的解决方案,当然了,采用下面方案对于重型应用或者固件级的优

前言 像素完美(Pixel Perfection).分辨率无关(Resolution Independent)和多平台体验一致性是设计师们的追求. 可访问性(Accessability).加载性能和重构灵活性是前端工程师们关心的主题. 当下互联网设备「风起云涌」,显示分辨率「层出不穷」,为 Web 创建者们带来越来越多的难题. 需要为高PPI(aka Retina)显示设备准备@1.5x.@2x.@3x的图片素材: 需要针对不同显示屏分辨率来调整优化排版: 需要考虑多个分辨率版本的图片的加载性能

什么是 IconFont 顾名思义,IconFont 就是字体图标.严格地说,就是一种字体,但是,它们不包含字母或数字,而是包含符号和字形.您可以使用 CSS 设置样式,就像设置常规文本一样,这使得 IconFont 成为 Web 开发时图标的热门选择. IconFont 的背景 WebFont 我们都知道,在网页制作中,会经常用到不同的字体,常用的有 微软雅黑.宋体.Aria 等等.在我们写css的样式的时候,通过 font-family 可以指定元素的字体名称,我们称这类字体为 WebFon

在前面一系列文章中,我们可以看到微信自定义菜单的重要性,可以说微信公众号账号中,菜单是用户的第一印象,我们要规划好这些菜单的内容,布局等信息.根据微信菜单的定义,我们可以看到,一般菜单主要分为两种,一种是普通的Url菜单(类型为View的菜单),一种是事件菜单(类型为Click的菜单),一般情况下,微信的Url菜单,是无法获得用户的任何信息的,但微信用户信息非常重要,因此也提供了另外一种方式(类似重定向的方式)来给我们使用,本篇主要介绍这种重新定向的方式菜单的使用,以使我们能够尽可能和用户进行交

1.JavaScript的灵活性 JavaScript是目前最流行.应用最广泛的语言之一,它是一种极富表现力的语言,它具有C家族语言所罕见的特性.这种语言允许我们使用各种方式来完成同一个任务或者功能,还允许我们在面向对象编程的过程使用函数式编程中的概念来丰富其实现方式.这种语言允许我们采用多种不同的编程风格进行编程,如简单一些的函数式编程,复杂一些的面向对象编程.所以我们可以在长期的编码过程中,培养专门属于自己的编程风格,下面的例子会体现出JavaScript的灵活性. 下面我们将要实现一个模拟

iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种方法 一.在线引用 图标的制作和上传可以参照官网给出的文档:Page 1 图标的下载和使用官网上说的不是很清楚,简单介绍下: 1.首先在Iconfont-阿里巴巴矢量图标库(微博登录)上面将你需要的图标点击购物车按钮加入“暂存架” <img src="https://pic2.zhimg.com/6a10

需求描述 一个比较复杂的页面,界面中包含的元素数据来自于许多个有关联或者无关联的表,然后我们要做的就是将数据呈现在界面上. 10年前大概都是这么干的 直接写一个复杂的SQL语句,返回一个包含所需数据的二维表,然后直接与界面开始绑定. 简单.粗暴. 今天的现状 信息化解决方案的普及,我们接到的企业应用项目很多都是在旧系统无法满足需要的情况下扩展,业务功能也将建立在原来的基础上变得更加复杂. 所以,为了解决系统复杂所带来的困惑,人们开始使用分层架构. 分出数据访问层,使得数据提供得以重用.分出业务逻

一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜色,可以添加阴影,旋转,透明度等视觉效果. 3.兼容性 图标字体IconFont支持所有现代浏览器,包括IE低版本. 二.IconFont的缺点 1.图标字体只能被渲染成单色或者css3的渐变色: 2.设计自已的IconFont需要花费大量时间,也会增加前端重构的成本: 3.Firefox和IE9不

一．图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般外置字体一样的使用,因此Winform.WPF中都是可以用的. 在我们多个WPF项目中广泛使用了图标字体,包括自定义控件.自定义样式.模板等.总结下: 网上开源字体图标很多,很容易获取,项目开发中需要的绝大部分图标都可以找到,非常方便,推荐 阿里巴巴开源字体: 字体文件非常小,比使用png等图片文件

最近的更新速度越来越慢,主要是项目上比较忙,封装EasyUi也要花很多时间.不过大家请放心,本系列不会半途夭折,并且代码干货也会持续更新.本文继续介绍表现层和Asp.net Mvc,我将在本篇讨论一些重要的设计问题和封装技巧. 是否需要将控制器分离为独立项目 经常有人问我,是否有必要将控制器从Web项目中分离出来,下面谈一下我的认识,仅供你参考,不一定正确,请根据你自己的实际情况决定. 控制器的作用是调用业务逻辑,将获得的结果传给视图显示.从根本上说,控制器只是起协调作用,它不应该自身完成复杂的

本文将介绍表现层及ASP.NET MVC的一些要点,特别是ASP.NET MVC的一些抽象和封装技巧,如果你对MVC还不了解,可以参考<ASP.NET MVC4 高级编程>,作者Jon Galloway等,这本书由ASP.NET MVC团队成员编写,相当不错. 表现层的职责 表现层的职责是展示和收集数据,将领域层的数据和逻辑展示出来,并收集用户输入的相关信息. 搞清楚表现层的职责以后,你就应该清楚,表现层不是你应该编写业务逻辑的地方,这也是分层架构的核心. 如果要展示一个计算值,不应该在表现层

图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face),后来W3在CSS2中也引入这个方法,但是后来CSS2.1又被删除了,真是遗憾.直到CSS3,又一次引入,这真是个好消息. 详细见:http://www.w3.org/TR/css3-fonts/. 不过经常会被问到,移动端用没问题,PC上IE可以了,我可以负责任的说:当然可以.原因上面说了,@fo

我们以阿里巴巴矢量图标库举例,地址:http://www.iconfont.cn/ 在这里,你可以上传你的矢量图标,也可以直接使用现成的小图标. 为什么要用这些个图标字体,本文就不介绍了,请自行百度. 下面,我将介绍如何使用iconfont图标字体. 假设,有一个项目,在登录的时候需要两个小图标,一个是代表帐号,另一个代表密码的图标,大概就是这样: 图片的红框处,我们需要俩个小图标.以前的做法肯定是做图片啦,现在就可以用iconfont字体图标代替了.操作如下: 第一步:你得有一个阿里巴巴矢量图

除非特别说明,本文中出现的 Shell 均指 Bash 4.3.首先说一个基础知识:Shell 中的变量在展开成值(Parameter Expansion)之后,这个值在某些上下文(Context)中,还会进行分词操作(Word Splitting),但在另外一些上下文中,不会进行分词操作.本文中把会进行分词操作的上下文叫做列表上下文(List Context),把不会进行分词的上下文叫做标量上下文(Scalar Context).还有一个基础知识再提一嘴,就是 Shell 在分词时会跳过那些被

前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从而达到减小应用体积的目的(这样避免了@2X图和@3X图的使用,只需要一个字体图标就可搞定).如需在项目中使用iconfont技术,图标矢量图一开始都应合并转化为字体库(这属于UI设计师的工作了).在这里会简单说明怎么生成字体库和简单的使用!此技术缺点也很明显,只适用于纯色的icon! 字体库生成 针

<!DOCTYPE html> <html> <head> </head> <body id="body"> <!-- /*transition过渡特效*/ 第一步:设置目标元素div2的初始样式 第二步:设置目标元素div2在鼠标hover时的表现样式 第三步:给目标元素添加transition属性,并指定需要过渡的属性 /*固定宽高盒子上下左右居于不定宽高容器正中*/ 第一步:设置待定位盒子和宽高值 第二步:将待定位

icon font 使用与svg应用分享 icon font 字体概述 css3增加了@font-face属性,传统的浏览器是通过font-family来设置字体,如果系统里没有的话就用其它字体来代替. 有了@font-face属性就方便多了,可以由开发人员通过设计自定义字体来进行的,加载过程是浏览器通过下载字体,再进行渲染页面 font-face可以设置自定义自体,也可以设置自定义图片字体,font icon由此诞生.@font-face 引入生成好的字体文件 ,然后在网 页中需要使用某个图标