当前位置:首页 » 网页前端 » web图标字体
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

web图标字体

发布时间: 2022-06-17 10:16:21

① 将图标转换成web字体 我显示不出来的

字体文件创建好了,你可以先用word试试么...

② 桌面图标及字体都很正常,但使用IE浏览网页时,Web页面的字体变大,排版混乱是怎么回事啊

在IE上点击查看--文字大小,选择一合适的文字大小即可

③ webstorm怎么把字体变大

方法/步骤
首先我们双击桌面的webstorm图标,打开webstorm。

之后随便打开一个文件就可以看到其字体大小,方便一会儿比较。

然后点击上面菜单栏的“文件”,找到其子菜单中的“设置”,点击打开。

在打开的新窗口中找到“Editor”选项,点击它前面的加号。

然后再找其子菜单中的选项,直到找到“Font”选项,点击即可。

这时候在右侧就可以设置其字体和大小了,设置完成后点击下面的确定按钮即可。

跟原来的字体大小比较发现其已经变化了。

④ web前端怎么用iconfont 调节字体大小

iconfont的使用

平时的网页开发该如何使用iconfont?在这边微信小编给大家推荐一个工具:Iconfont-阿里巴巴矢量图标库。

WEB前端开发,图标的快速制作

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

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

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

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

什么是优秀的图标?

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

不论何时,当你从“它象征着什么”—— 它向你的观众传达了什么信息,或者它唤起了他们什么概念——思考你的某一部分设计工作时,你就是以符号学家的角度来审视你的设计。符号学像其它语言学一样,的确可以覆盖一种语言,在一个网站上面,有很多东西不是通过文字表达出来的,例如颜色、字体、形状(图标)。每个人都应该注意的是,这些东西所表达的都含有一种很强的文化因素。在中国,红色可以表示好运气,而在很多西方国家,它却意味着危险。
术语“icon”在符号学中有一个特殊的意思。icon是一个神器,通过相似表达某事物。例如,一个标记地图位置的icon。它拥有一个类似真实的
地图标记的形状,因此它可以表示一个位置,反过来,真正的地图位置标记使人们想起各种有意义的概念。其中这些有抽象的概念,比如地点;也有不太抽象的概
念,比如这个位置可能在什么地方。

一些所谓的图标并不具有真正意义的代表性。无处不在的RSS图标,一个点和两个同心圆弧段,没有什么比它更像Really Simple
Syndication 了。构成RSS图标的形状通过单独约定具有象征意义,对此我们已经达成了共识。不过,一个RSS图标更适合被称为RSS标志。
现在,我希望我们已经确定了下面两项成功的网站icon需要遵循的准则:

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

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

字体图标日益受到欢迎

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

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

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

给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 和 Sailor Moon都是收费的。实际上意味着真有两个问题:

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

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

除了自动抓取程序,我假定主要是网页设计师将会阅读这篇文章。我是一个设计师,我不认为只有我一个讨厌依靠别人的作品,使自己的设计思路大打折扣这
种事儿。当然,我更不喜欢那种有支付权限的想法。我知道自己要使用什么图标,并且我知道如何才能使其适合我的整体设计。我想要那种控制力。

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

使用Inkscape制作icon字型

启动Inkscape

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

OBJECT → FILL AND STROKE

OBJECT → ALIGN AND DISTRIBUTE

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

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

制作你的第一个字型

为定义字型,点击SVG字体编辑面板中的“Glyphs”选项卡,然后点击面板下方的“Add
Glyh”按钮。一开始你可能不太清楚,但如果你在你的字形(“字型1”)上点击,一个字段将会显示出来,它要求你输入你需要的图标对应的字符。我们首先
要做一个简单的星形,所以我建议你输入的字符“s”,“S”或“*”:

现在我们已经定义了字型对应的字符,我们需要制作字型本身。由于这次我们仅仅要制作一个星星,我们应该从Inkscape左边的工具栏中选择有用的
Stars and Polygons tool
,然后,在画布上绘制一个星星。你会发现,这个工具自带的选项允许您更改星星的外观。在我的例子中,选择了角数为5,spoke
ratio为0.5,rounded value为0.1。

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

在我们的icon字体中,字型只是形状,没有颜色、层级或者渐变的形状。因此,为了使我们的星星成为一个合格的字体候选者,我们必须将它由一个对象
转化成基于路径的图形。你可以通过在主按钮上选择星星,然后是PATH → OBJECT TO
PATH来完成这一任务。现在,选择了星星之后,我们可以在SVG Font Editor 中,高亮显示可用的“s”字型,然后点击 Get
curves from selection按钮:

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

制作更加复杂的icon

你已经制作出了第一个可扩展的SVG字体字型。通过使用Fill and
Stroke面板上的选项:编辑路径节点,以及合并对象和笔画,能够使你做出更加不凡的icon设计。由于我们还有很多要讲,我不想深入完成一个完整的
Inkscape教程,但是遵循下面的简单规则会给你带来好处:

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

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

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

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

准备嵌入你的字体

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

把SVG转化成TTF

你应该采取的第一项措施是,将SVG字体格式转换成一个更熟悉、更通用的格式。 TTF是一种用于本地安装的卓越格式。同时,它还为再转化成@font-face提供了一个良好的基础。可以进行字体转换的在线服务包括: http://onlinefontconverter.com,http://www.fontconverter.org和http://www.font2web.com。然而,我个人最喜欢的,是http://www.freefontconverter.com,因为我不会排队,也从来没看到它产生什么故障。

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

编辑字体信息

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

重要提示:虽然Microsoft Font Properties
Editor允许您添加作者,描述和许可信息,它似乎并没有让你编辑字体名称、附言名称等基本数据。这些字段是被禁用的。如果你想使用这些特殊的功能,你
需要在SVG转换为TTF之前,在SVG代码中编辑禁止的值。在你喜欢的文本编辑器(我用Notepad++)中打开原始的SVG,并编辑以下内容:

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

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

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

嵌入字体

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

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

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

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

发布字体

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

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

有了这两种许可,你还应该在一个文本文件中保存版本信息,同时在字体的元信息中插入版权声明和完整许可的URL链接。如果需要更具体的说明,请访问各自的许可证页面(上面的链接)。

CSS spriting的终结者

为什么要停下使用SVG字体做通用图标的脚步?有了做图标的能力,也就有了能力去设计出站点独有的形状、品牌元素和装饰。这一点像CSS
sprities,所有这些视觉元素都可以保存在一个文件中,减少了服务器调用http请求的次数;不过,icon字体的元素都可以调整大小,而不必依赖
于位置坐标(背景位置值)才能正确显示。这使它们更适合于 responsive design。

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

关于这种方式,最好的事情就是通用性。举例来说,从左边的第二个齿轮形状既可作为一个微小的圆点设计,又可以是一个巨大而抽象的背景装饰。着色很简
单:color:maroon,但没有必要坚持扁平的颜色;多种CSS3效果叠加起来可以为它添加纹理和触感。为了让你一开始有所启发,查看this excellent gallery of CSS3-enhanced webfonts。

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

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

一个协作式icon web字体

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

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

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

⑥ 如何WEB中把字体加粗

我不太清楚你到底要做什么,你贴出来的三段代码,分别表示了三段不同的 区隔标记 ,而且后两段都没有结束区域的符号,三段中也没有内容或文字,所以不知道你是想在哪一个区域把哪些文字加粗。
如果你是自己做网页,使用HTML语言,Dreamweaver里面的功能轻轻松松可以帮你实现你要的操作。
如果你是在浏览网页是看人家的源代码,你即使修改了,也只能在自己本地浏览啊,那何不用Dreamweaver打开更方便。

最后,认真回答你的问题。<DIV align="center"><FONT face="宋体"><strong>你要输入的字</strong></FONT></DIV> 是没错的,“你要输入的字”就是被加粗的部分,并在这个区域内被居中。

给你提供一些HTML代码,自己研究下吧。

标记 类型 译名或意义 作 用 备注
文件标记
<HTML> ● 文件声明 让浏览器知道这是 HTML 文件
<HEAD> ● 开头 提供文件整体资讯
<TITLE> ● 标题 定义文件标题,将显示于浏览顶端
<BODY> ● 本文 设计文件格式及内文所在
排版标记
<!--注解--> ○ 说明标记 为文件加上说明,但不被显示
<P> ○ 段落标记 为字、画、表格等之间留一空白行
<BR> ○ 换行标记 令字、画、表格等显示于下一行
<HR> ○ 水平线 插入一条水平线
<CENTER> ● 居中 令字、画、表格等显示于中间 反对
<PRE> ● 预设格式 令文件按照原始码的排列方式显示
<DIV> ● 区隔标记 设定字、画、表格等的摆放位置
<NOBR> ● 不折行 令文字不因太长而绕行
<WBR> ● 建议折行 预设折行部位
字体标记
<STRONG> ● 加重语气 产生字体加粗 Bold 的效果
<B> ● 粗体标记 产生字体加粗的效果
<EM> ● 强调标记 字体出现斜体效果
<I> ● 斜体标记 字体出现斜体效果
<TT> ● 打字字体 Courier字体,字母宽度相同
<U> ● 加上底线 加上底线 反对
<H1> ● 一级标题标记 变粗变大加宽,程度与级数反比
<H2> ● 二级标题标记 将字体变粗变大加宽
<H3> ● 三级标题标记 将字体变粗变大加宽
<H4> ● 四级标题标记 将字体变粗变大加宽
<H5> ● 五级标题标记 将字体变粗变大加宽
<H6> ● 六级标题标记 将字体变粗变大加宽
<FONT> ● 字形标记 设定字形、大小、颜色 反对
<BASEFONT> ○ 基准字形标记 设定所有字形、大小、颜色 反对
<BIG> ● 字体加大 令字体稍为加大
<SMALL> ● 字体缩细 令字体稍为缩细
<STRIKE> ● 画线删除 为字体加一删除线 反对
<CODE> ● 程式码 字体稍为加宽如<TT>
<KBD> ● 键盘字 字体稍为加宽,单一空白
<SAMP> ● 范例 字体稍为加宽如<TT>
<VAR> ● 变数 斜体效果
<CITE> ● 传记引述 斜体效果
<BLOCKQUOTE> ● 引述文字区块 缩排字体
<DFN> ● 述语定义 斜体效果
<ADDRESS> ● 地址标记 斜体效果
<SUB> ● 下标字 下标字
<SUP> ● 上标字 指数(平方、立方等)
清单标记
<OL> ● 顺序清单 清单项目将以数字、字母顺序排列
<UL> ● 无序清单 清单项目将以圆点排列
<LI> ○ 清单项目 每一标记标示一项清单项目
<MENU> ● 选单清单 清单项目将以圆点排列,如<UL> 反对
<DIR> ● 目录清单 清单项目将以圆点排列,如<UL> 反对
<DL> ● 定义清单 清单分两层出现
<DT> ○ 定义条目 标示该项定义的标题
<DD> ○ 定义内容 标示定义内容
表格标记
<TABLE> ● 表格标记 设定该表格的各项参数
<CAPTION> ● 表格标题 做成一打通列以填入表格标题
<TR> ● 表格列 设定该表格的列
<TD> ● 表格栏 设定该表格的栏
<TH> ● 表格标头 相等于<TD>,但其内之字体会变粗
表单标记
<FORM> ● 表单标记 决定单一表单的运作模式
<TEXTAREA> ● 文字区块 提供文字方盒以输入较大量文字
<INPUT> ○ 输入标记 决定输入形式
<SELECT> ● 选择标记 建立 pop-up 卷动清单
<OPTION> ○ 选项 每一标记标示一个选项
图形标记
<IMG> ○ 图形标记 用以插入图形及设定图形属性
连结标记
<A> ● 连结标记 加入连结
<BASE> ○ 基准标记 可将相对 URL 转绝对及指定连结目标
框架标记
<FRAMESET> ● 框架设定 设定框架
<FRAME> ○ 框窗设定 设定框窗
<IFRAME> ○ 页内框架 于网页中间插入框架 IE
<NOFRAMES> ● 不支援框架 设定当浏览器不支援框架时的提示
影像地图
<MAP> ● 影像地图名称 设定影像地图名称
<AREA> ○ 连结区域 设定各连结区域
多媒体
<BGSOUND> ○ 背景声音 于背景播放声音或音乐 IE
<EMBED> ○ 多媒体 加入声音、音乐或影像
其他标记
<MARQUEE> ● 走动文字 令文字左右走动 IE
<BLINK> ● 闪烁文字 闪烁文字 NC
<ISINDEX> ○ 页内寻找器 可输入关键字寻找于该一页 反对
<META> ○ 开头定义 让浏览器知道这是 HTML 文件
<LINK> ○ 关系定义 定义该文件与其他 URL 的关系
StyleSheet
<STYLE> ● 样式表 控制网页版面
<span> ● 自订标记 独立使用或与样式表同用

注:

● 表示该标记属围堵标记,即需要关闭标记如 </标记>。
○ 表示该标记属空标记,即不需要关闭标记。
IE 表示该标记只适用于 Internet Explorer。
NC 表示该标记只适用于 Netscape Communicator。
反对 表示该标记不为 W3C 所赞同,通常这标记是 IE 或 NC 自订,且己为众所支 持,只是 HTML 标准中有其它同功能或更好的选择。
弃用 表示该标记己为 W3C 所弃用,是过时的标记,但 HTML 具向下兼容的特 性,不用担心新浏览器不支援旧标记。
新 表示该标记是 HTML 4.0 中新增的。

⑦ 如何制作icon-fontweb字体ttf

使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 1.自由的变化大小 2.自由的修改颜色 3.添加阴影效果 4.IE6也可以支持 5.支持图片图标的其它属性,例如,透明度和旋转等等