发布网友 发布时间:2022-04-20 00:29
共6个回答
懂视网 时间:2022-05-12 20:53
web端为什么需要做字体图标?性能好。在之前项目中,网页的图标是用的图片,当图标很多时,体积比较大。而且之前做过2年的UI设计,总觉得这样经常切图麻烦,当需要同一个图标大小不一时,直接放大图片会失真。
字体图标制作流程
1:第一当然需要一个设计师啦...我常用的方法,设计师设计出图标保存为SVG格式的。
当没有设计师时,也可以在http://www.iconfont.cn/ 下载自己需要的SVG图标。需要登陆账号,看见喜欢的图标可以收藏或者下载下来,一版情况下时不支持这的,图标也是有版权问题的,不过如果是小公司使用也没有人管...尽量支持正版,做过设计,设计师也不容易哈哈。
2:把SVG格式的图标进行处理,推荐网站:http://www.iconfont.cn/或者http://fontello.com/,拖进来就可以了。
可以在里面设置图标大小,或者设置公司名字,下面红色代表需要下载的。
3:下载文件包括下面内容
dome.html文件就是显示的图标在网页中的显示情况,看看是不是都显示正常。
4:怎么使用在网页中,引入css文件,把图标名称写入class类就可以了。
<!doctype html><html lang="us"><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="sk/css/sk.css"> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> <style> .btn{width:30px;height:30px;background:#eff3f6;border:1px solid #ddd;color:#398def} .btn:hover{background:#fff} .btn:hover i{color:#398def;} </style></head><body> <p> <button type="button" class="btn" title="导航"><i class="icon-daohang"></i></button> <button type="button" class="btn" title="删除"><i class="icon-shanchu"></i></button> <button type="button" class="btn" title="设置"><i class="icon-shezhiqianhouzhui"></i></button> <button type="button" class="btn" title="搜索"><i class="icon-jiansuo"></i></button> <button type="button" class="btn" title="导入"><i class="icon-daoru"></i></button> <button type="button" class="btn" title="导出"><i class="icon-daochu"></i></button> </p> <p> <button type="button" class="btn" title="趋势"><i class="fa fa-area-chart"></i></button> <button type="button" class="btn" title="四面"><i class="fa fa-arrows"></i></button> <button type="button" class="btn" title="左右"><i class="fa fa-arrows-h"></i></button> <button type="button" class="btn" title="上下"><i class="fa fa-arrows-v"></i></button> <button type="button" class="btn" title="设置"><i class="fa fa-asterisk"></i></button> <button type="button" class="btn" title="@"><i class="fa fa-at"></i></button> </p></body></html>
当然,如果不想设计图标,也怕麻烦,也可以直接导入外部的图标库,比如:font-awesome
css文件<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
下面是两种方式的效果图:
上面的为<link rel="stylesheet" href="sk/css/sk.css">的效果
下面的为<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">效果,引入的是下图位置的图标,不需要自己制作图标,不过当图标库进行更改是可能会影响自己的效果。
5:引入的图标css文件源码分析
@font-face属性,css3开始添加的,兼容IE6
每个图标的代码片段:
特别需要注意的,当你每一次需要增加图标时,直接添加 .icon-kaiguandingyi:before { content: 'e88a'; } /* '?' */ 这样代码是没有用的,因为前面还有几个关联文件,需要同时修改,因此尽量在生成图标的网站用自己的账号登陆,可以生成一个自己的图标库,可以长久保存使用。
热心网友 时间:2022-05-12 18:01
对于设计预算有限的中小品牌而言,Logo字体设计一般都是选择现有的标准字体。但去哪里下载免费商用的中文字体使用呢?以及如何根据字体性格气质和品牌Logo图标造型,在众多字体选择出适合的字体呢?比如是衬线字体还是无衬线字体?是扁平体还是瘦高体?这篇文章将分享三个Logo字体选择核心技巧。
衬线字体相对于无衬线字体而言,在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。比如我们最常用到到的思源宋体,而大多数黑体字是无衬线字体,比如阿里巴巴普惠体。
衬线字体的装饰和艺术效果,可以为你的品牌传递精致、典雅、历史权威性,如果你从事艺术、时尚美容或较为保守的传统行业,这是不错的选择。
随着极简风流行,加上无衬线字体在移动设备上阅读更加容易,一线bat大厂越来越多地选择无衬线字体。同时,它还可以投射出更简单,更易于使用,年轻,现代且开放的品牌调性。
选择了扁平风字体代表「旁门正道标题体」和瘦高字体代表「胡晓波真帅体」做比较:
通常情况下比较纤瘦、高挑的字形更具文艺、优雅、细腻、精致气息,偏女性化更多一些,你可以用于女性品牌设计,比如美容养生、珠宝饰品、艺术设计类logo设计。
而扁平的字形重心偏低更沉稳,庄重、稳定一些,比较适合建筑重工、物流运输、能源化工等品牌使用。
如果字体笔画以圆角曲线为主的话,就会给人柔美灵动的感觉,比如江城圆体。反之如果笔画有棱有角,包括转角处多为折角,这样的字体会传递速度和力量感,比如台北黑体。
圆体字一般适用于儿童、母婴行业、幼儿教育、潮流时尚等行业,此外如果你的Logo图标是曲线图形,字体选择圆体字搭配起来会更和谐一些。
直角字体多富有现代感、方正简洁、醒目的特征无明显的情感表达,运用场景较广泛
学会了技巧,不知道去哪里找到好看又免费的Logo设计字体怎么办?给大家送上LOGO神器最新上线的——Logo设计字体在线生成器。
上方案例中用到的字体,只需点击对应的字体名称,点击左下角「下载字体」,即可将字体文件保存到本地。所有字体都可以免费商用,请放心使用。
选中某个字体,下拉可以看到使用了该字体的Logo设计案例,为你提供更多设计灵感参考。点击案例,选择直接编辑,还可以在该案例基础上编辑设计自己的logo,赶快去试试吧!
热心网友 时间:2022-05-12 19:19
很多企业都会有自己的logo,logo代表着企业的形象,为了结合企业的名称,字体logo是其中的一种方式。那么logo字体设计技巧有哪些?让时间财富威客网小编来给大家好好介绍一下。热心网友 时间:2022-05-12 20:53
第一:具象手法:就是选取两到三个与行业相关的元素,以表达想要表达的事或者特点。这种字体设计logo手法与品牌特点相互衬托,使品牌的特征更加鲜明、突出,便于受众理解与记忆。
第二:象征手法:也是要依据行业特点,选取代表祥云代表吉祥、选取书本代表教育、选取交叉线条代表互联网等,借助元素去赋予标志的抽象内涵。也能传递给受众准确的品牌行业信息,进而便于受众识别。
第三:字体创意手法:就是对汉字或者英文字母进行创意变形,如:和孩子有关的标志,就可以将文字变成小动物、或者加个小手、小表情等,让文字变得有趣,吸引人,进而达到视觉强力吸引,这样的标志设计简洁、大方,深受受众喜爱。
第四:地域元素表现手法:以当地的民俗文化作为元素,可以构成独一无二的图案,具有丰富的人文情怀,足够吸引人,还可以引起当地人的共鸣。但是这需要对当地文化进行深入了解,才可以设计出佳作。
第五:正负空间法:这根具象法有点类似,这种也是通过与行业相关的元素去表达行业的特点,但是又比具象法更加高级点。这种方法对作品的立体感官更加强烈,也比较考验设计师的空间想象力与设计技术。
热心网友 时间:2022-05-12 22:45
字体视界整理了一些关于LOGO字体设计的文章,可前往查看,希望能给您一些参考
热心网友 时间:2022-05-13 00:53
多了去了 网上有的是教程