网页小图标(rel quot icon quot 为网页标题设置小图标)

编程之家2024-02-02152次浏览

一、js中用confirm("str")弹出的消息框怎么设置按钮的文本

自带的confirm无法对按钮文字进行修改，可以自定义一个层

<p>

<inputonclick="msgbox('提示','请至少选择一项需要删除的记录!','',null,0,'Warning')"type="button"value="提示"/>

<inputonclick="msgbox('提示','操作执行成功!','',null,0,'true')"type="button"value="操作成功"/>

<inputonclick="msgbox('提示','操作执行失败!','',null,0,'error')"type="button"value="操作失败"/>

<inputonclick="msgbox('确认删除么?','点击确认执行删除操作,点击取消不再执行操作!','msgbox(\'操作提示\',\'删除成功!\',\'\',null,0,\'true\')',1,1,'Warning')"type="button"value="confirm"/>

</p>

<scripttype="text/javascript"language="javascript">//<![CDATA[

functionmsgbox(title,content,func,cancel,focus,icon){

参数列表说明:

title:弹出对话框的标题,标题内容最好在25个字符内,否则会导致显示图片的异常

text:弹出对话框的内容,可以使用HTML代码,例如<fontcolor='red'>删除么?</font>,如果直接带入函数,注意转义

func:弹出对话框点击确认后执行的函数,需要写全函数的引用,例如add(),如果直接带入函数,注意转义。

cancel:弹出对话框是否显示取消按钮,为空的话不显示,为1时显示

focus:弹出对话框焦点的位置,0焦点在确认按钮上,1在取消按钮上,为空时默认在确认按钮上

icon:弹出对话框的图标

Author:Jedliu

Blog:Jedliu.cublog.cn

【网页转载请保留版权信息,实际使用时可以除去该信息】

icon=""+icon+".png";

create_mask();

vartemp="<divstyle=\"width:300px;border:2pxsolid#37B6D1;background-color:#fff;font-weight:bold;font-size:12px;\">"

+"<divstyle=\"line-height:25px;padding:0px5px;background-color:#37B6D1;\">"+title+"</div>"

+"<tablecellspacing=\"0\"border=\"0\"><tr><tdstyle=\"padding:0px0px0px20px;\"><imgsrc=\""+icon+"\"width=\"64\"height=\"64\"></td>"

+"<td><divstyle=\"background-color:#fff;font-weight:bold;font-size:12px;padding:20px0px;text-align:left;\">"+content

+"</div></td></tr></table>"

+"<divstyle=\"text-align:center;padding:0px0px20px;background-color:#fff;\"><inputtype='button'style=\"border:1pxsolid#CCC;background-color:#CCC;width:50px;height:25px;\"value='确定'id=\"msgconfirmb\"onclick=\"remove();"+func+";\">";

if(null!=cancel){temp+="<inputtype='button'style=\"border:1pxsolid#CCC;background-color:#CCC;width:50px;height:25px;\"value='取消'id=\"msgcancelb\"onClick='remove()'>";}

temp+="</div></div>";

create_msgbox(400,200,temp);

if(focus==0||focus=="0"||null==focus){document.getElementById("msgconfirmb").focus();}

elseif(focus==1||focus=="1"){document.getElementById("msgcancelb").focus();}

}

functionget_width(){

return(document.body.clientWidth+document.body.scrollLeft);

}

functionget_height(){

return(document.body.clientHeight+document.body.scrollTop);

}

functionget_left(w){

varbw=document.body.clientWidth;

varbh=document.body.clientHeight;

w=parseFloat(w);

return(bw/2-w/2+document.body.scrollLeft);

}

functionget_top(h){

varbw=document.body.clientWidth;

varbh=document.body.clientHeight;

h=parseFloat(h);

return(bh/2-h/2+document.body.scrollTop);

}

functioncreate_mask(){//创建遮罩层的函数

varmask=document.createElement("div");

mask.id="mask";

mask.style.position="absolute";

mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25)";//IE的不透明设置

mask.style.opacity=0.4;//Mozilla的不透明设置

mask.style.background="black";

mask.style.top="0px";

mask.style.left="0px";

mask.style.width=get_width();

mask.style.height=get_height();

mask.style.zIndex=1000;

document.body.appendChild(mask);

}

functioncreate_msgbox(w,h,t){//创建弹出对话框的函数

varbox=document.createElement("div");

box.id="msgbox";

box.style.position="absolute";

box.style.width=w;

box.style.height=h;

box.style.overflow="visible";

box.innerHTML=t;

box.style.zIndex=1001;

document.body.appendChild(box);

re_pos();

}

functionre_mask(){

更改遮罩层的大小,确保在滚动以及窗口大小改变时还可以覆盖所有的内容

varmask=document.getElementById("mask");

if(null==mask)return;

mask.style.width=get_width()+"px";

mask.style.height=get_height()+"px";

}

functionre_pos(){

更改弹出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间

varbox=document.getElementById("msgbox");

if(null!=box){

varw=box.style.width;

varh=box.style.height;

box.style.left=get_left(w)+"px";

box.style.top=get_top(h)+"px";

}

functionremove(){

清除遮罩层以及弹出的对话框

varmask=document.getElementById("mask");

varmsgbox=document.getElementById("msgbox");

if(null==mask&&null==msgbox)return;

document.body.removeChild(mask);

document.body.removeChild(msgbox);

}

functionre_show(){

重新显示遮罩层以及弹出窗口元素

re_pos();

re_mask();

}

functionload_func(){

加载函数,覆盖window的onresize和onscroll函数

window.onresize=re_show;

window.onscroll=re_show;

}

//]]></script>

二、ps可爱图标制作教程-ps怎么制作icon小图标

如何用PS制作一个简单的圆形图标（Logo）？

1、打开ps新建一个文件,然后在工具箱内找到椭圆形选项,如图所示:

2、选择椭圆形选项在新建的文件内画出一个环形,如图所示:

3、选择其中的大的圆形,在图层里找到将路径转为选区选项,如图所示:

4、点击将路径转为选区之后再在工具箱内找到渐变填充选项,如图所示:

5、点击渐变填充选项在上面选择填充色,及填充的样式,如图所示:

6、我们使用鼠标左键拖动就得到了填充效果,如图所示:

7、然后选择小圆,并将其转为选区,然后按下delete将将其删除,然后将路径隐藏这样我们的图标就制作好了,如图所示:

1、打开PS,新建所需的图标尺寸,点击确定。

2、使用椭圆选框工具,点击鼠标画出一个圆形选框,鼠标左键不松开,按住shift键,使其为一个正圆形。

3、选择文字工具,输入文字【Ps】,改变字体颜色为白色。增加文字图层效果,添加【投影】。

4、隐藏背景图层,得到一个透明背景。储存为web所用格式。选择为PNG格式,点击确定,得到一个简单的圆形图标。

使用Photoshop制作小icon

在这一次教程我们将会使用Photoshop制作2个小icon。这2个同属于一个系列的icon应该要符合相同的主题,这一次我们将会制作一个太阳icon,一个Rssicon.

步骤一

新建一个350x350px的文件,点击背景内容旁边的下拉菜单,设置画布的颜色。

步骤二

在拾色器里面选择#e0e0e2作为我们的背景颜色

步骤三

新建一个组,命名为sun,我们把sunicon放在这里

步骤一

使用圆角矩形工具画一个83x64px圆角半径为8px的圆角矩形。

步骤二

按住shift画一个36px,半径3px的正圆角矩形。(和之前的圆角矩形在同一个图层)

步骤三

按CTRL+T键将正圆角矩形旋转45度

步骤四

使用对齐工具使两个圆角矩形水平居中对齐用鼠标拖动正圆角矩形到适当的位置

步骤五

在已有的图形上新画一个比原来小1px的图形。你可以复制原来的矩形然后缩放,也可以从新画一个。(在新的一个图层)

步骤六

将新图形的颜色设置为#57adf8

步骤七

双击新图像的图层打开图层样式,设置描边和渐变叠加。

渐变编辑器如下设置。

步骤八

将图层填充设置为11%

结果像这样

步骤一

新建一个图层放置到基本图形图层的下面,使用笔刷工具画出阴影。

步骤二

用笔刷工具在小三角下面再加一层阴影

步骤三

按住CTRL键左键同时单机新圆角矩形图层的图标做出选区,新建图层,使用软笔刷画出高光。

步骤四

CTRL+D取消选区,降低高光图层的透明度。

步骤五

再制作出刚才的选区,新建图层,在选区内填充从黑到白的渐变。将图层模式设置为叠加,降低图层的透明度。

步骤六

使用之前的选区,将模式设置为取交集,使用椭圆选区工具在圆角矩形的下部分做出选区,新建一个图层,填充黑到白的渐变。将图层模式设置为滤色,降低图层透明度。

步骤七

按住CTRL点击大圆角矩形图层做出选区,新建一个图层放于最顶部。编辑->描边,将颜色设置为淡蓝,宽度1px。

步骤八

给描边图层添加图层蒙版,给蒙版填充黑色,这样描边就消失了。用笔刷工具,颜色设置为白色,在蒙版上,在圆角矩形边的一些地方涂抹,制作出高光。

步骤九

新建一个色彩平衡调节图层,将他的名字设置为colorchanger。

步骤十

将colorchanger图层的蒙版填充黑色,用选区工具把有圆角矩形的地方填充白色。图层设置如下。

步骤十一

复制sun文件,改变colorchanger的设置,这样就获得了三个不同颜色的基本形状。

步骤一

我们先做太阳的图标,用椭圆工具画一个圆形,填充黄色。

步骤二

给图层样式添加内阴影和内发光,设置如下,颜色为#7b6708,模式都是正片叠底。

步骤三

在太阳的下半部画上亮一些的黄色。

步骤四

在太阳的上部画一个椭圆,填充一个明亮的黄色。

步骤五

在太阳的右上角画出一条细的高光,为了更自然一些,可以用硬度小的橡皮擦除一部分。

步骤六

接下来我们制作阳光的部分。用钢笔工具画出一个菱形,填充黄色。将它放到太阳的后面。

步骤七

复制一份菱形,旋转45度。(这些菱形在一个图层内)

步骤八

重复复制和旋转。

步骤九

打开图层样式,添加内阴影#b48f0b,外发光#f9dc7e。

步骤十

把太阳图层隐藏起来,新建图层,画更多小一些的菱形。

步骤十一

用椭圆工具画一个圆形,设置路径模式为减去。

步骤十二

在太阳图层下面新建一个图层,用软笔刷画出漫射光

步骤十三

给sun组添加图层样式,添加内发光。

步骤十四

现在开始画Rss图标,新建图层,用椭圆工具画一个圆形。

步骤十五

复制这个圆形路径,将它缩小,路径模式设置为减去。

步骤十六

重复上面步骤,获得如下图形。

步骤十七

绘制两个矩形,设置路径模式为减去顶层,如图。

步骤十八

打开图层样式,添加内发光,渐变叠加,投影。

结果如图。

@MohammadJeprie

原文地址

PSD

ps怎么制作icon小图标

方法一,打开ps,直接

新建ctrt+N,新建高宽为256像素大小的图像,(本人亲测,当高宽任一大于256像素的话,保存时都不能为ico格式),控制高宽像素小于256,然后拖进自己的图像,另存为ctrt+shift+s——选择保存ico格式.即可,出现对话框,就选择第二个选项。即可

方法二,打开ps,打开自己的图片,ctrt+alt+i调整图像大小,控制高宽小于256像素,这个也实验过了,当大于256像素时如图:

当小于或等于256像素时,如图,那么可以保存了,保存时就有ico格式可以选择,此时文件差不多小于150K

选择保存路径后,点击保存,然后选择第二个选项:png(vista).....。点击OK即可。(如果选择第一个,那么文件基本是失败。)

三、icon在线设计免费-ps怎么制作icon小图标

有哪些的图标网站值得推荐？

图标网站:

1、Iconfont-阿里巴巴矢量图标库

阿里巴巴旗下的免费矢量图库,提供了矢量图标下载、在线存储、格式转换等,可以中文搜索,直接在搜索框里输入需要的内容,就可以出现对应的素材。点击下载图标就可以了,网站还支持在线修改颜色,真的是很绝一网站。

2、NounProject

一个基于平面设计师而创办的icon图标分享平台,提供高质量、可辨识性强的图标,使用者在网站上可以通过右上角的图标找到分类,筛选出你想寻找或使用的标志图示,分类包括动物、食物与饮料、生活保健、人物、安全与警示、科学、运动与娱乐、交通运输、旅游、天气与自然等等分类。

3、Iconninja

IconNinja是一个高质量的免费图标素材搜索下载平台,支持近100万个免费图标,按照文件格式、图片宽度、高度、文件大小等信息,用户可以根据自己的需求进行选择,特别适合前端工程师或者PPT设计师使用。

4、icons8

icons8是高质量的免费图标资源网站,支持在线改色、添加文字或背景装饰等。用户在下载素材时,可以选择SVG、EPS、PNG和PDF四种下载格式,方便用户后续在不同场景中的使用需求。

5、IconPark

IconPark是字节出品的一个开源图标库,可以将一个单一的SVG源文件变幻出多种主题,网站分类详细、为用户提供更轻量的代码和更灵活的使用场景;致力于构建高质量、统一化、可定义的图标资源,让大多数人都能够选择适合自己的风格图标。

ps怎么制作icon小图标

方法一,打开ps,直接

方法二,打开ps,打开自己的图片,ctrt+alt+i调整图像大小,控制高宽小于256像素,这个也实验过了,当大于256像素时如图:

当小于或等于256像素时,如图,那么可以保存了,保存时就有ico格式可以选择,此时文件差不多小于150K

选择保存路径后,点击保存,然后选择第二个选项:png(vista).....。点击OK即可。(如果选择第一个,那么文件基本是失败。)

如何制作自己的网页字体图标

从设计单独的图标开始,到把它们转化成@font-face格式以备嵌入,乃至授权给他人使用,整个过程中我们将仅使用免费软件和在线服务。感觉怎么样呢?你不必依托于任何深奥的知识就可以制作出一套成功的英文字体(包括字母和数字),而只需要眼睛来设计——你面对的可能是非常非常小的东西。

最终,你将会收获一个制作设计元素的过程(方法),它的意义远远在制作出简单的图标之上。

在我们继续之前,首先应该谈谈,究竟希望通过在设计中使用图标达到什么目的,又是什么使得一个图标比下一个更成功。先讲理论再讲应用。为了完成这个任务,我们必须思考图标作为符号学的一部分,所扮演的角色。

什么是优秀的图标?

符号学,从广义上来说就是研究符号系统,我们如何对它们的形成和维护做出贡献,它们亦因我们对世界的理解而受到影响。

不论何时,当你从“它象征着什么”——它向你的观众传达了什么信息,或者它唤起了他们什么概念——思考你的某一部分设计工作时,你就是以符号学家的角度来审视你的设计。符号学像其它语言学一样,的确可以覆盖一种语言,在一个网站上面,有很多东西不是通过文字表达出来的,例如颜色、字体、形状(图标)。每个人都应该注意的是,这些东西所表达的都含有一种很强的文化因素。在中国,红色可以表示好运气,而在很多西方国家,它却意味着危险。

术语“icon”在符号学中有一个特殊的意思。icon是一个神器,通过相似表达某事物。例如,一个标记地图位置的icon。它拥有一个类似真实的

地图标记的形状,因此它可以表示一个位置,反过来,真正的地图位置标记使人们想起各种有意义的概念。其中这些有抽象的概念,比如地点;也有不太抽象的概

念,比如这个位置可能在什么地方。

一些所谓的图标并不具有真正意义的代表性。无处不在的RSS图标,一个点和两个同心圆弧段,没有什么比它更像ReallySimple

Syndication了。构成RSS图标的形状通过单独约定具有象征意义,对此我们已经达成了共识。不过,一个RSS图标更适合被称为RSS标志。

现在,我希望我们已经确定了下面两项成功的网站icon需要遵循的准则:

要有与真实事物的相似点,例如,一个类似真实打印机的打印图标。

你的图标在符号系统中应该是一个熟悉的,可识别的标志。

字体图标日益受到欢迎

Icon字体,由于其提供了一种图标速记方式,长期以来被认为是一种加强型UI设计,它协助人们理解文本信息。Icon图像以毒品传播的速度在整个web设计社区流传,使用它可以使你的设计更加亮丽、吸引更多用户点击。

与图片相比,使用icon式字体是一个相对新的主意。然而,与图片(背景图片方式)相比,它具备很多固有的优势,因此它的吸引力正在逐渐增长。早在9月初,我在微博上写了它的一些好处,ChrisCoyier显然也有类似的想法,几周之后也向更多观众介绍了它。基于以上两篇文章和其它内容,我编写了这个较为完整的特征列表:

它们的尺寸能够轻松调整,并且不会损坏图像质量(作为矢量图);

给icon定义颜色和文本一样简单。例如,对于一个rss图标,color:orange;

可以把许多icons排列在一个组中,也就是一个文件中,这样只需要一次http请求就可以了;

正如Chris所指出的,它们在IE6中也可以借着透明性显示出形状(这一点与PNG图片不同);

对于那些应该出现在文字附近的图标,对齐方式和包装都不是问题(因为它们是文本);

你可以应用CSS3的text-shadow和background-clip:text效果,以便凸显字型的形状;

不像SVG,icon字体很容易实现跨浏览器兼容;

问题

Chris说过,使用icon字体是一个不错的主意,我要告诉你。

尽管如此,icon字体的使用现状并不理想。首先,一些优质的可用字体,如Pictos,Fico,Klepto,Cheetos,Ponyo和SailorMoon都是收费的。实际上意味着真有两个问题:

你或许不得不投资一部分钱。

无论你是否需要花钱,你将会被迫接受其他一些人的糟糕设计。

除了自动抓取程序,我假定主要是网页设计师将会阅读这篇文章。我是一个设计师,我不认为只有我一个讨厌依靠别人的作品,使自己的设计思路大打折扣这

种事儿。当然,我更不喜欢那种有支付权限的想法。我知道自己要使用什么图标,并且我知道如何才能使其适合我的整体设计。我想要那种控制力。

经过一些搜索,我想介绍一下Inkscape的svg字体编辑器。通过使用Inkscape和一款在线转换器(SVG字体到TTF),我制作出了字体“Heyding”,这个字体在Simurai’slist(由Coyier的文章链接到)中有介绍。我不打算将自己的字体卖给你(它是免费的),但是我想它会带给你一个非常好的概念。

使用Inkscape制作icon字型

启动Inkscape

我们先从下载和安装Inkscape开始。你也应该使用我的icon字体启动器模板,它们被放在这个GitHub仓库的资源文件夹里(以后这个项目中还会有更多)。一旦你在Inkscape中打开了这个文件,你应该通过在主菜单中打开以下窗口来设置好你的工作空间:

OBJECT→FILLANDSTROKE

OBJECT→ALIGNANDDISTRIBUTE

TEXT→SVGFONTEDITOR

在SVG字体编辑面板中,点击“Font”下的“Font1”。现在,你的工作空间看起来应该有点儿像这个截图:

值得指出的是,baseline不是在画布的下边界之下:如果你希望与相邻的字体共享同一条基线,你的图标应该很轻微地悬在画布的底部。我已经用Georgia,Arial和一些网页字体进行了测试。

制作你的第一个字型

为定义字型,点击SVG字体编辑面板中的“Glyphs”选项卡,然后点击面板下方的“Add

Glyh”按钮。一开始你可能不太清楚,但如果你在你的字形(“字型1”)上点击,一个字段将会显示出来,它要求你输入你需要的图标对应的字符。我们首先

要做一个简单的星形,所以我建议你输入的字符“s”,“S”或“*”:

现在我们已经定义了字型对应的字符,我们需要制作字型本身。由于这次我们仅仅要制作一个星星,我们应该从Inkscape左边的工具栏中选择有用的

StarsandPolygonstool

,然后,在画布上绘制一个星星。你会发现,这个工具自带的选项允许您更改星星的外观。在我的例子中,选择了角数为5,spoke

ratio为0.5,roundedvalue为0.1。

使用AlignandDistributepanel(可能在SVGFontEditor下面隐藏着)使星星横向居中,然后乡下拖动形状使触及基线。关闭网格显示之后,画布看起来应该像这样子:

在我们的icon字体中,字型只是形状,没有颜色、层级或者渐变的形状。因此,为了使我们的星星成为一个合格的字体候选者,我们必须将它由一个对象

转化成基于路径的图形。你可以通过在主按钮上选择星星,然后是PATH→OBJECTTO

PATH来完成这一任务。现在,选择了星星之后,我们可以在SVGFontEditor中,高亮显示可用的“s”字型,然后点击Get

curvesfromselection按钮:

当你在SampleText区域输入“s”时,你的星星应该被预览出来,如下所示:

制作更加复杂的icon

你已经制作出了第一个可扩展的SVG字体字型。通过使用Filland

Stroke面板上的选项:编辑路径节点,以及合并对象和笔画,能够使你做出更加不凡的icon设计。由于我们还有很多要讲,我不想深入完成一个完整的

Inkscape教程,但是遵循下面的简单规则会给你带来好处:

坚持使用黑色笔画和填充,只是为了提醒你:那些icon仅仅是形状,而非复杂的矢量图。为icon上色这件工作,我们会在最终产品中使用CSS来完成。

所有对象和笔画(线条)必须被转化成路径(不管使用PATH→OBJECTTOPATH或者PATH→STROKETOPATH)

当有多个对象和/或笔画被用来完成一个icon字型时,它们应该被合并起来(使用PATH→COMBINE或者,在某些情况下,使用PATH→UNION)

为了在已有的形状上剪切出想要的形状,将形状放置在主形状上面,选择两个形状,然后选择PATH→DIFFERENCE。点击Getcurvesfromselection,黑色块上面的白色区域剔除之后就是你要的形状。

准备嵌入你的字体

假如你已经重复了很多次我刚才所描述的方法,创建了一些有用的图标,并且,字体文件被保存为。现在,你将要准备好把这个图标库用于网页中。

把SVG转化成TTF

你应该采取的第一项措施是,将SVG字体格式转换成一个更熟悉、更通用的格式。TTF是一种用于本地安装的卓越格式。同时,它还为再转化成@font-face提供了一个良好的基础。可以进行字体转换的在线服务包括:

和

。然而,我个人最喜欢的,是

,因为我不会排队,也从来没看到它产生什么故障。

我想,不需要向你介绍如何使用这个资源也足以显示我的诚意了。醒目的文件上传字段,select元素和巨大的转换按钮会让你迅速抓住重点,真的。

编辑字体信息

既然你已经获得了一个TTF,我推荐你现在编辑产生的元数据。对字体进行重命名、添加属性和描述,使它准备好被安装、嵌入和分发。这也是一种声明字体为你所创造的途径。运行Windows的读者可以选择使用貌似很霸气的MicrosoftFontPropertiesEditor或者允许免费使用X天的Typograf。对于苹果和Linux用户,我希望得到你们更好的意见。

重要提示:虽然MicrosoftFontProperties

Editor允许您添加作者,描述和许可信息,它似乎并没有让你编辑字体名称、附言名称等基本数据。这些字段是被禁用的。如果你想使用这些特殊的功能,你

需要在SVG转换为TTF之前,在SVG代码中编辑禁止的值。在你喜欢的文本编辑器(我用Notepad++)中打开原始的SVG,并编辑以下内容:

FontName:标签中可以寻找到,font-family属性

PostscriptName:标签中可以寻找到,id属性

Description:你应该在这个标签中添加一个描述(作者、许可等)。请注意这与TTF描述文字是不同的,转换过程中将不会被保留;你还需要为TTF添加单独的描述信息。

嵌入字体

一旦你在本地系统中安装了TTF,并且已经预览过,确定没有出现意外状况,你就可以在FontSquirrel的@font-facegenerator中运行它了。为了使输出代码的效率和效果尽量好,这里有几个专家模式中的选项值得一提:

Subsetting:该选项允许您只运行需要的字符集(包括字符编码、类型、语言等选项),减少文件大小。

Removekerning:您的图标将几乎总是单独出现,所以字距是没有必要的。据称,这也将减小文件大小。

WebOnly:如果你希望您的字体仅仅用于web中,而非桌面-你可以选择此选项。它也可以更好地满足您的授权计划。现在我将介绍许可证。

发布字体

如果你有兴趣发布你的字体,给它添加许可是一个比较好的做法。否则许多字体网站将不会带它玩儿。由于我们制作图标时使用的是免费、开源的软件,发布时也不妨这样做。

目前,有很多可用的授权选项,而逐一调查研究它们有时是令人费解的一件事。GNUGeneralPublicLicense是完全可以接受的,但你可能要考虑SILOpenFontLicense。使用这种许可证的主要优点是,reservedfontname:即允许其他设计师修改字体,但他们需要用不同的名字。在实践中,这意味着,对图标设计的一些不良行为不能以“你的名字”来进行。

CSSspriting的终结者

为什么要停下使用SVG字体做通用图标的脚步?有了做图标的能力,也就有了能力去设计出站点独有的形状、品牌元素和装饰。这一点像CSS

sprities,所有这些视觉元素都可以保存在一个文件中,减少了服务器调用http请求的次数;不过,icon字体的元素都可以调整大小,而不必依赖

于位置坐标(背景位置值)才能正确显示。这使它们更适合于responsivedesign。

让我们假装要选择使用一个SVG字体去代替一些我的steampunk般的blog里基本的设计元素。组件设计的一个简单的HTML表格呈现会是这个样子:

关于这种方式,最好的事情就是通用性。举例来说,从左边的第二个齿轮形状既可作为一个微小的圆点设计,又可以是一个巨大而抽象的背景装饰。着色很简

单:color:maroon,但没有必要坚持扁平的颜色;多种CSS3效果叠加起来可以为它添加纹理和触感。为了让你一开始有所启发,查看thisexcellentgalleryofCSS3-enhancedwebfonts。

关于屏幕阅读器的快速笔记

以这种方式使用字体来显示视觉元素的一个问题是,在屏幕阅读器上输出时会受到影响。直观上的网站访问者会看到齿轮,箭头之类的图标,但是屏幕阅读器将坚持读出指定这些设计的字符。对于使用装饰性的SVG字体元素,我建议听取Coyier的建议:为Unicode的SupplementaryPrivateUseArea分配向量。这样的符号不应该由读者来读出。

一个协作式iconweb字体

作为我的JavaScript导师,Rupert,有一天向我指出,使用SVG字体来创建图标集为合作提供了一个有趣的机会。你看,SVG的代码-XML的一种形式-是高度标准化而且轻松可读的。正是源码的顺序让我觉得,icon字体的开发很适合选择像GitHub这样的协作编码服务。

这个想法契合了我想要的符号含义:如果一个图标是由很多人协商之后一致确定的,那么它的形成过程中也存在一定的“共识”。通过我们的图标标识系统设计出来的,一定是最典型的图标。我们应该创建一种属于社区的icon词汇,并且它对于需要的人来说是有意义的。

为了发展这个想法,我创建了一个公开的GitHub仓库CommunityIconFont,这个仓库的文件结构并不复杂:仔细阅读上面的Inkscape教程和项目主页的内容应该可以为你解答所有的疑惑。如果你是GitHub的新成员,尝试阅读它们的帮助页面,或者问问你附近的技术人员(我正是这样做的)。

no such file(no such file怎么解决)flash8注册码(flash8.0激活序列号)