WEB ICON 的探讨

一般考虑到webicon 就是cssSprite和自定义font:本文基于下述而总结和进行分析,如有笔误有望指出,谢谢在线教程:用字体在网页中画ICON图标 http://www.imooc.com/learn/243 免费图标: https://icomoon.io/#home 制作font教程: webfont应用系列(一)位图如何转成矢量?http://ntesmailfetc.blog.163.com/blog/static/206287061201241854857235/ webf…

@font-face制作Web Icon

@font-face是CSS3中有关于字体设置的属性,通过@font-face可以将本地字体设置为Web页面字体,并能兼容所有浏览器,使用这个属性就不必担心用户本地不具备这样的字体.因为我们把字体都上传到服务器上,不过这样一来很多人担心影响性能问题.鱼和熊掌不能兼得嘛,我们就不在为这个问题说太多的话了,不过我今天要与大家分享的主题和这个@font-face还是有很在关系的,使用他配合一定的字体来制作Web页面中的Icon图标.初一看有点不实际,以前的Icon都是依靠图片来完成,怎么可能用字体就能…

Web 设计新趋势: 使用 SVG 代替 Web Icon Font

如果你还在使用 Icon Font 作为网页中显示图标的实现方案,那么你可能有点 Out 了. 由于使用 Icon Font 显示图标存在一些缺陷,开发者们一直在致力于探索使用 SVG 作为替代的方法. 这篇文章列举了目前 SVG 比较常见的使用方法. 关于使用 Icon Font 的缺陷,这篇来自 CSS Trick 的 <Inline SVG vs Icon Font> 可谓是总结的相当全面了.在我看来,Icon Font 的主要缺陷有以下几条: 浏览器将其视为文字进行抗锯齿优化,有时得到…

[记录] web icon 字体

weloveiconfonts 在http://codepen.io/cguillou/pen/jmkfK 中看css发现既然有这样的,yes!…

在 :after/ :before 使用 font awesome web Icon

.element { position: relative; } /*replace the content value with the corresponding value from the list below*/ .element:before { content: "\f000"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; /*--…

ASP.NET Web API系列教程目录

ASP.NET Web API系列教程目录 Introduction:What's This New Web API?引子:新的Web API是什么? Chapter 1: Getting Started with ASP.NET Web API第1章 ASP.NET Web API入门 Your First Web API (C#)第一个Web API(C#) Deep Dive into Web API深入探讨Web API(这是一个视频教程,本翻译系列略) Pro ASP.NET Web…

Web API 2

Asp.Net Web API 2 官网菜鸟学习系列导航[持续更新中] 前言本来一直参见于微软官网进行学习的, 官网网址http://www.asp.net/web-api.出于自己想锻炼一下学习阅读英文文章的目的,又可以学习下微软新发布的技术,其实也很久了,但自己菜鸟一枚,对自己来说都是新技术了.鉴于以上两个原因,本人打算借助google翻译和有道词典,来翻译学习这个系列,并通过博客园来记录自己的翻译学习过程.由于自己阅读水平的确太菜,在借助工具的情况下,有时候搞出来的也是蹩脚的语句,自…

ASP.NET Web API系列教程（目录）(转)

注:微软随ASP.NET MVC 4一起还发布了一个框架,叫做ASP.NET Web API.这是一个用来在.NET平台上建立HTTP服务的Web API框架,是微软的又一项令人振奋的技术.目前,国内对此关注的人似乎还不多,有关ASP.NET Web API的文章也不多见.为此,本人打算对微软ASP.NET Web API官方网站上的一些教程进行翻译,以期让更多的国人了解.学习和使用这项ASP.NET Web API. ASP.NET Web API系列教程目录 Introduction:Wha…

[转]ASP.NET Web API系列教程（目录）

本文转自:http://www.cnblogs.com/r01cn/archive/2012/11/11/2765432.html 注:微软随ASP.NET MVC 4一起还发布了一个框架,叫做ASP.NET Web API.这是一个用来在.NET平台上建立HTTP服务的Web API框架,是微软的又一项令人振奋的技术.目前,国内对此关注的人似乎还不多,有关ASP.NET Web API的文章也不多见.为此,本人打算对微软ASP.NET Web API官方网站上的一些教程进行翻译,以期让更多的国…

再探@font-face及webIcon制作

@font-face 不能说他是什么新东西了,在 CSS2.0 规范中就有了这玩意儿,IE4.0 开始就已经出现,只是当时用的不是特别广泛,后来在 CSS2.1 草案中又被删掉.随着 web 的急速发展,@font-face 价值越来越凸显,然后再次被纳入 CSS3 草案中.@font-face 是个什么东西,本文不做过多说明,不太清楚的童鞋可以看这里 http://www.w3schools.com/css/css3_fonts.asp.需要强调的是他的书写格式: @font-face { f…

CSS学习笔记----CSS3自定义字体图标

响应式网页字体图标作者:大漠日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icons>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文,需注明英文出处:http://webstandardssherpa.com/reviews/responsive-webfont-icons,以及作者相关信息 ——作者:Jason ——译者:大漠响应式…

Retina时代的前端视觉优化

随着New iPad的发布,平板也将逐渐进入Retina时代,在高分辨率设备里图片的显示效果通常不尽人意,为了达到最佳的显示效果就需要对图片进行优化,这里介绍一些优化方法: 一.用CSS替代图片这一点在任何时候都适用:只是在当前我们可以更多的使用样式表来制作出设计效果,CSS3的圆角.渐变.模盒阴影.字体阴影能帮助我们处理绝大多数视觉效果,并且在各种分辨率下都有良好的表现. CSS Button 二.为高分辨率设备提供高清图片如果必须使用图片,通常是准备2套图片,一套原始尺寸( 为普通设备准…

CSS Sprite小图片自动合并工具

css-sprite是将css样式中零星的小图标,小图片合并成大图显示,这样能减小服务器并发连接数,减小服务器负载和带宽使用,有很高的实用价值.这里介绍一些自动合并图片并生成样式的工具. NodeJS css-sprite css-sprite是一个基于NodeJS实现的css切图自动合并工具,能自动将小图片合成大图,支持retina sprites和base64输出格式. 注* retina sprites视网膜屏幕指的是接近人眼能够直观感受到的基础色素级别的输出格式.Base64是将图片转化…

!!字体图标（iconfont、Fontello 、雪碧图生成工具。Glyphicons、fontawesome 等）。图片压缩

http://www.iconfont.cn/ 阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.com/p/font-awesome/#icons-new 2015-10-27 http://isux.tencent.com/icon-font.html 图标字体化浅谈(教程) 2015-11-3 https://icomoon.io/app 图标字体生成器 IcoMoon!一个可以通过个…

浅谈table和DIV网页布局

DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位. CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML 等文件式样的计算机语言. DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始标签和结束标签之间的…

iOS开发周报-- 第一期

从Java转iOS第一个项目总结 http://www.cocoachina.com/ios/20150417/11595.html icon设计探讨:图标,文字,还是图标加文字? http://www.cocoachina.com/design/20150414/11552.html 为什么整个互联网行业都缺CTO http://www.cocoachina.com/programmer/20150413/11540.html…

大型网站系统架构实践（五）深入探讨web应用高可用方案

从上篇文章到这篇文章,中间用了一段时间准备,主要是想把东西讲透,同时希望大家给与一些批评和建议,这样我才能有所进步,也希望喜欢我文章的朋友,给个赞,这样我才能更有激情,呵呵. 由于本篇要写的内容有点多,我就分为几篇博客进行了详细描述. Haproxy提高web应用的高可用上一篇文章讲到了haproxy+tomcat的方案,文章地址:大型网站系统架构的演进(四)http层负载均衡之haproxy实践篇(一) 大家可以先温习一下, 文中提到了高可用,该集群方案也可以提高应用系统的高可用,如果tom…

大型网站系统架构实践（六）深入探讨web应用集群Session保持

原理在第三,四篇文章中讲到了会话保持的问题,而且还遗留了一个问题,就是会话保持存在单点故障, 当时的方案是cookie插入后缀,即haproxy指负责分发请求,应用服务自行保持用户会话,如果应用服务器宕机,则session会丢失. 现在来温习下解决方案方案1:session复制原理就是将1台服务器的session复制到其它所有的服务器上,这样无论访问哪台服务器,都会得到用户的session 优点不存在单点故障问题缺点当服务器的数量比较大时,session同步将会变得相当耗时方…

web.xml配置bug之提示The content of element type "web-app" must match "(icon?,display- name?,description?,distributable?,

错误:配置web.xml时,出现红色叉叉,提示 The content of element type "web-app" must match "(icon?,display- name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,servlet- mapping*,session-config?,mime-mapping*,welcome-…

响应式Web图形篇 —— icon fonts 的探析及应用

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

移动Web之响应式布局的探讨

响应式布局的探讨响应式布局的两种方式基于百分比的布局例:Bootstrap 基于rem的布局例:淘宝触屏版这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监听窗口大小来调整) 从而可以根据屏幕大小来调整百分比布局中盒子的宽度或 rem布局中HTML的字体大小知识点: 实现rem布局的方式和效果实现平均分布对齐的方式(flex与justify) 平均分布对齐的应用百分比布局基于百分比的布局这里就演示了,Bootstrap 已经应用很广泛,相信…

探讨Web组件化的实现

CMS组件化,简单架构示意图: Web组件使用WebPage+WebAPI的好处: Ø 组件复用(组件条件管理页面复用+获取组件数据API复用). Ø 组件是分布式的第三方应用,本身高内聚.组件之间松耦合,可以理解为独立的子系统. Ø 组件使用WebAPI,提供REST风格的WebService,轻量级,对客户端的要求也更少. Ø 组件可以单独开发,单独测试,高度封装,可以区分不同环境,其它组件完全可以不做任何测试. Ø 组件热插拔,组件易替换,可扩展性强,不会有dll相互依赖.影响,…

Web直接导入导出SHP/CAD实现探讨。

1.导入SHP/CAD文件 WEB具有直接美观展现功能,功能实现到可视化最好不要超过3S,那么就要限制导入文件的大小和优化算法了. 1.1.SHP导入实现思路 SHP格式开源,Git上随便可以找到读取SHP的源码,读取后一般返回GeoJson或JSON格式的要素,然后解析GeoJson实现可视化,ArcGIS体系或OpenLayers体系. 1 var jsonf = GeoJsonConverter();//GeoJson转Esri 2 shp(filename).then(function…

web前端监控的三个方面探讨

一. js错误监控方式 1. 主动判断我们在一些运算之后,得到一个期望的结果,然而结果不是我们想要的 // test.js function calc(){ // code... return val; } if(calc() !== "someVal"){ Reporter.send({ position: "test.js::<Function>calc" msg: "calc error" }); } 这种属于逻辑错误/状态错…

web中icon 图标问题

每个页面都会引入 icon 小图标,下面说下它的用法一.icon使用 icon的引入方式,与css外部引入方式类似,需要在头部引入, 即: <link rel="shortcut icon" href="favicon.ico"> 或者 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 在线制作i…

探讨后端选型中不同语言及对应的Web框架

在进行后端选型的时候,实际上我们要选择的是一个框架.后端领域所使用的技术和框架已经趋于稳定,我们只需要按我们的需要选择所需要的框架.当存在多个框架适合时,我们再选择适合的语言.不得不指出的是,当我们喜爱一个语言的时候,我们可能会偏爱于在这门语言里寻找可用的方案.这自然是有好有坏,好的一点是:我们可以成为这门语言的专家,不好的一点是:我们可能选择的不是最合适的方案. 让我们先来探索一下可用的语言,以及它们对应的 Web 框架(以下内容均为个人观点): JavaScript 按照当前的流行趋势来看,…

web图标icon tomcat图标icon

有时候我们需要更改项目图标为自己的,毕竟tomcat的小猫图标用着不得劲. 你看打开百度等网站时,在地址栏前面就会出现一个蓝色的熊掌状图标或者其他的样式的图标,如果在桌面新建此链接的快捷方式,则桌面图标也自动变为该地址栏ICO图标. 当我们使用tomcat开发BS时,tomcat默认的图标为黄色的小猫咪. 为了符合自己的需要,这时候就需要用自己想要的图标了. 方法如下: 首先,要有一张图标,对吧.你自己需要展示的图标,一般是公司Logo. 如果你的图标不是.ico格式的,需要转换一下.这有个转换…