@font-face制作Web Icon

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

jQuery制作Web全屏效果

需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plugin: 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 0…

用Inno Setup制作WEB程序安装包

原文用Inno Setup制作WEB程序安装包最近做了一个WEB程序的安装包,我把制作的过程做个介绍,贴出源码给大家做个参考看看inno 的脚本 [Setup] AppCopyright=test AppName=test AppVerName=test v2.0 SolidCompression=true OutputDir=Output\ OutputBaseFilename=test_setup DefaultDirName={pf}\Lms DefaultGroupName=Lms…

Jquery.Treeview+Jquery UI制作Web文件预览

效果图: 前台Html: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_26.QingShan.WebFileViewer._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q…

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

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

在 :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; /*--…

制作web字体：CSS3 @font-face

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,另外@font-face这个功能早在IE4就支持了,比如说首页的Logo,Tags以及页面中的手写英文体这些都可以用@font-face来实现了. 首先我们一起来看看@font-face的语法规则: @font-face { font-family: <YourWebFontName>; src: <sou…

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…

Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映

前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装X,是需要付出一些代价的,不过如果你是一个前端爱好者,理解HTML/CSS,那么就没什么问题了. 看看网上的实例,动手练习练习,分分钟就能上手了. 介绍: impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(…

图片转web字体库，如何制作web字体库

最近项目上用到了很多svg图,设计师经常频繁改版,苦不堪言,于是就想到了把图片转成字体库来使用. 使用图片的缺点: 1. 图片加载速度慢 2. 图片大小固定,无法调节 3. 当代码重构或者图片目录位置改变时,需要一个个修改,繁琐而且容易出错字体库优点 1. 字体不会因缩放而失真(这根制作字体的图片有很大关系) 2. 使用方便,灵活,不受代码重构或者文件位置移动影响 3. 文字效果可以很容易地应用到你的图标上,包括颜色,阴影和翻转等效果. 如何制作字体库有很多工具可以制作字体库,本文就不在一一…

使用font awesome制作网站常用社交工具联系方式图标

在公司项目或者个人建站时经常会有这么一个需求,就是在网站的底部以图标的形式加入自己的某些常用社交联系方式,比如QQ.微信.微博.Twitter等等,如果采用传统切图的方式去制作这些图标会有两个缺点: 1.前端工程师有可能不懂美工切图的相关技术,而有些小公司又没有美工这个职位,这样自己找素材就会十分麻烦 2.传统图片没法灵活地调整尺寸,比如当图片放大后里面的内容就会变得很模糊,无法适应比较复杂的需求使用font awesome这套开源图标库就能很好解决以上两个问题. 使用font awesome…

web基础，用html元素制作web页面

用div,form制作登录页面,尽可能做得漂亮. 练习使用下拉列表选择框,无序列表,有序列表,定义列表. 观察常用网页的HTML元素,在实际的应用场景中,用已学的标签模仿制作. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MIS问答平台</title> </head> <body b…

【咸鱼教程】TextureMerger1.6.6 三：Bitmap Font的制作和使用

BitmapFont主要用于特殊字体在游戏中的使用目录一方法1:添加字符适合一张一张的零碎图片来制作位图字体二方法2:系统字体适合使用已安装的系统字体来制作位图字体三方法3:字体纹理集适合美术提供的整张图字体来制作位图字体打开TextureMerger,选择BitmapFont 一方法1: 添加字符 (序列图制作位图字体) 选择0 1 2 字体图片记得去掉附加拓展名的勾.因为左侧的命名和右侧的图片是对应关系,命名“0”就代…

TextureMerger1.6.6 三：Bitmap Font的制作和使用

BitmapFont主要用于特殊字体在游戏中的使用. 比如我想使用方正剪纸字体,但是没加载方正剪纸.ttf字体时,egret是没法使用这种字体的. 或者美工制作了效果拔群的0123456789数字字体. 这些情况就可以使用bitmapfont,将字体使用到游戏中. 目录一方法1:添加字符适合一张一张的零碎图片来制作位图字体二方法2:系统字体适合使用已安装的系统字体来制作位图字体三方法3:字体纹理集适合美术提供的整张图字体来制作位图字体 1 打开Text…

用inno Setup制作web项目安装包

http://www.cnblogs.com/xionghui/archive/2012/03/22/2411207.html 用inno Setup制作安装包新建一个文件夹exambody,放apache-tomcat-6.0.33.mysql-5.1.37-win32.java(注:jdk)和图标exambody.ico 1. 批处理安装mysql服务: 在mysql-5.1.37-win32\bin 的目录下: 新建一个文件:启动服务.bat 里面写: cd /d %~dp0…

Getting Started with OWIN and Katana(Console 代替iis 制作 web服务的简单方案)

Open Web Interface for .NET (OWIN) defines an abstraction between .NET web servers and web applications. By decoupling the web server from the application, OWIN makes it easier to create middleware for .NET web development. Also, OWIN makes it easier…

利用Highcharts制作web图表学习（一）

前言:最近项目中需要对数据进行汇总和分析得出柱状图或曲线图这样散装点图,经过学习和测试发现Highchart不错,如果大家项目中需要的话,不妨看看有的例子摘自官网一.先说说HighCharts的主要特性包括: 1.兼容性:HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括Safari.IE和火狐等等: 2.图表类型:HighCharts支持图表类型,包括曲线图.区域图.柱状图.饼状图.散状点图和综合图表等等,可以满足各种需求. 3.不受语言约束:HighCha…

JS实现悬浮导航的制作--web前端

思想:导航在这里只有两种状态,一种是初始状态.一种是固定布局状态.实现悬浮导航其实就是通过Javascript脚本语言控制导航的两种状态,主要是对两种状态成立条件的判断,明确了这些,实现起来就不会太难. 1.基础页面(HTML+CSS) 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content=&quo…

教你如何制作饼干icon教程

Hello,不露又和大家见面了,今天给大家带来的是一个可爱Q弹的icon~ 看起来像块饼干是吧~ 做起来非常简单哦,快打开PS一起躁起来吧. 先来看看效果图: 步骤1:打开PS,新建一个800*600的画布. 给画布填充颜色:#6807ae,在画布中间建一个尺寸为360*360:圆角为60的圆角矩形:填充颜色:#ffffff. 步骤2:在圆角矩形左上角建一个90*90的矩形,填充渐变色:#fc7f26~#fcc277:角度:-45°. 步骤3:复制出剩下的15个:然后选中这16个渐变小色块右建—…

使用HTML5的Notification API制作web通知的教程（转）

var notification=new Notification(‘Notification Title',{ body:'Your Message' }); 上面的代码构造了一个简陋的通知栏.构造函数的第一个参数设定了通知栏的标题,而第二个参数则是一个option 对象,该对象可设置以下属性: body :设置通知栏的正文内容. dir :定义通知栏文本的显示方向,可设为auto(自动).ltr(从左到右).rtl(从右到左). lang :声明通知栏内文本所使用的语种.(译注:…

制作web安装程序

出处:http://www/i-blog.cn/u/chenli/archives/2006/8.html 本文参考http://blog.csdn.net/libra1983/archive/2006/09/25/1274933.aspx 1.1. 打开VS2005,创建一个新的工程,选择:其他项目类型->安装和部署->安装项目.名称为Setup,确定. 2.2. 在文件系统中加入要安装的所有文件和文件夹.可在应用程序文件夹节点上单击鼠标右键,选择添加文件或文件夹.这里注意,如果要添…

怎样制作web版的folder treeview

文件夹treeview的效果这样的treeview在实际项目中使用的场景较多. 既然用的多,那就DIY一遍,虽没有面面俱到,但也要将其基本实现完成一遍. 1.先准备图标素材 file.gif,文件图标 folder.gif,文件夹打开中的图标 folder-closed.gif,文件夹关闭着的图标 treeview-default.gif,折叠图标 treeview-default-line.gif,折叠线图标,实际分辨率是16*1776 2. treeview是基于ul li以及他…

[记录] web icon 字体

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

利用Highcharts制作web图表学习（二）

最近中海油的项目需要用到图表展示数据,最近还是一直边学习边开发,今天做了一个展示,炼化厂加热炉效率展示的柱状图,把代码贴出来,大家指点一下互相学习,我是通过数组给Highcharts绑定的值,感觉这样做有点麻烦而且不灵活,大家有比较好的建议可以帮我看下,我引用了三个js,可以把本地的js注释掉用这些 <script type=); ); ;i<;i++) { data[i]=parse…

再探@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 ——译者:大漠响应式…

快速上手制作Icon Font

现在在提起Icon Font,已经不是什么新鲜的词汇了,网上已经有很多介绍它的文章,并且很多网站也已经将它用到,本篇主要是将制作Icon Font的整个流程整理一下,并且加入了自己在制作中遇到的问题,使得大家可以在今后使用的时候可以很快上手并且避免这些问题. 一.首先要说的是,什么是Icon Font. 我认为,我们现在通常所指的Icon Font,是用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 二.知道了什么是Icon Font之后,我们要了解它能干什么,大家是怎么用的这是一淘…

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

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

CSS Sprites+CSS3 Icon Font

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

asp.net core web 解决方案多项目模板制作打包总结

一.文件夹\项目结构 1.1.文件夹 net6.0:针对.net 6.0 项目模板 net6.0pack:针对net6.0打包 1.2.项目结构 Web\WebApi多项目.各层项目.单元测试项目目标:制作Web\WebApi两个项目模板二.模板参数 2.1.template\net6.0\.template.config\template.json { "$schema": "http://json.schemastore.org/template", &qu…

【@font-face制作Web Icon】的更多相关文章