菜单优设网 - UISDC

会员

开通优设VIP星球

尊享13项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

你的私人律师

每月可免费咨询30次

开通VIP

领取更多设计师实用特权

投稿

网页字体话题

首页
设计文章
网页字体

UI 2.4w

设计师走查必备基础！网页字体属性全方位揭秘

本文帮助大家了解设计稿和线上页面字体的关系，以及 Emoji 表情文字的显示方法，一起揭开字体中的秘密。

2020-06-01

土拨鼠

教程 2.9w

我们观察到，2018年网页文本字体的设计趋势有这7种

网站最基本的功能是呈现信息，让用户可以阅读。字体的展示和排版自然也是网页设计师工作的重要内容之一。今天，我们搜集了2018年网页设计领域正在流行的文字排版设计趋势，与你分享。

2018-05-23

陈子木

平面 3.5w

2017年流行的这些字体排版趋势，你都知道嘛？

技术和设计趋势一样，随着时间的推移总在不停地变化。对于网页设计师和前端而言，字体和排版所涉及到的技术和设计尤其是如此。不过纵观这几年，网页字体和排版在大方向上并没有明显变化，结合当前主流产品和设计，并不难确定2017年内，我们需要关注的这些字体和排版趋势。

2017-04-30

陈子木

优秀网页设计

平面 2.2w

用好这5个技巧，帮你快速挑选出最合适的字体

时下一种流行的设计方式是在页面顶部使用配有简洁文字的大幅图片或者视频，以此吸引用户进入网站。这种设计方式最头疼的就是如何为这些文字选择合适的字体。从样式繁多的字体库中找到一个合适的字体，往往会让设计师感到举步维艰。

2017-03-03

程远

平面 3.3w

总结了日式网站这4个优点后，我能把中文网站做得高大上了！

本文通过分析日式网站的色彩、图片、文字和元素运用，帮你充分吸收日式网站的精华，让中文网站的设计也变得高大上！色彩当我们看到小清新的网站的时候首先一定会想到日式网站。Sarara 是一家纯净水的网站，所以它的网站主题色系为蓝色系，主要由高饱蓝色到低饱蓝色的过度，加上明暗对比的强烈，直接了当的突出宣传的产品。

2017-02-22

程远

平面 2.5w

实例教学！10个帮你运用好字体组合的设计原则

编者按：选择与设计相符的字体、展现视觉的层次感、衬线体与非衬线体一起使用、避免字体冲突、避免使用相似的字体进行组合、限制你所使用的字体数量… 今天@喪心病狂十六夜貓这篇译文总结了运用好字体的设计原则，都是基础但不可忽视的，适合新手学习或重温。实例教学系列：《实例教学！12种透明背景的万能设计方法》《实例教学！

2016-08-21

程远

教程 2.3w

超赞！最佳WEB字体排版实践的简明指导手册

betsey：本文是站在一个网页设计师的角度，所写的关于最佳字体排版实践的手册，包括字体排版设计、Web 字体、Web 样式指导等四个方面，而且每一章后都有扩展阅读帮你深入了解细节，全程高能干货，建议阅读。目录简介字体排版设计视觉层次字体排版中的格式塔原则字体选择字体使用web字体字体加载OpenType的特性Web 样式指导相对大小容器字体尺寸垂直间隔颜色下划线总结简介字体排版绝不仅仅是使用字体那么简单，它包括了关于文字”看上去会是怎么样？”的所有事情——例如文字的大小，行...

2016-07-06

程远

教程 2.0w

谷歌字体安装指南！教你在网页上使用 Google Web font

现时有很多网站流行使用网页字体，这些字体大部分来自 Google Font 提供的700+免费字体，对于网页设计师和前端人员来说，是个很棒的字体库，设计师可以使用字体库提供的免费字体来网页设计，而前端人员可以直接调用 Web Font 样式，极其方便。这篇文章教你怎么用！本文告诉你：#1 下载 Google 字体库的免费字体，并安装到电脑上。

2016-04-28

程远

教程 2.5w

精雕细琢！打造优秀用户体验的10大排版规则

对于网页和APP而言，良好的排版不仅仅是摆上漂亮的字体就可以搞定的，高度的可读性和可识别性并不是简单的要求，视觉设计和内容风格也应当做好一致性。虽然这些要求看起来和“高大上”的需求一样空泛，但是找准方向稍加训练，并不难做到。所以，今天的文章我们将为你奉上10条可以帮你提升用户体验的排版规则，每条规则都附上实际案例助你理解和运用。

2016-04-02

陈子木

教程 3.5w

专业干货！想强调重点该用粗体、下划线还是斜体？

编者按：你以为的加粗很多是假粗体；下划线只是打字机时代的产物，如今根本不能用；中文没有斜体…. 以上仅仅是@justfont 这篇好文的众多亮点之一，这不仅是一堂生动的字体科普课，也附上了强调文本的实用方法。只要你需要排版，这篇文章就不能放过，都是基础功呀。计算机辅助的设计中，一般人可以轻易的凸显任何内文。

2015-11-19

程远

平面 6.6w

提升观感！如何把谷歌的「思源黑体」作为Webfont使用？

编者按：想让你的网站瞬间提升质感？试试谷歌和Adobe联合推出的「思源黑体」！现在只要加入一段 Typekit 程序代码，就可以把思源黑体作为网页字体（Webfont）使用了，附上具体的使用教程，来收！

2015-11-05

程远

教程 2.5w

超实用！帮新手熟练掌握字体运用的18招秘籍

文字、文本排版是日常工作中经常用到，看似简单的文字，实际上排版也是很有讲究，今天为大家整理一组信息图：用好文本的18条法则。如果你在版式方面内力不够精纯，可以跟随这些规则，让你少走很多弯路。1. 了解字体的性格每个字体都有性格，人们比较喜欢一些有特色的东西。

2015-09-25

程远

教程 1.4w

网站的关键！教你13步打造优雅的Web字体

今天，大多数浏览器已经默认支持Web字体，日趋增多的字体特性被嵌入最新版HTML和CSS标准中，Web字体即将迎来一个趋于复杂的崭新时代。下面是一些基本的关于字体的规则，特别适用于Web字体。原文地址：creativebloq 译者：特赞Tezign顺便附上一个神器：《前端工程师的菜！

2015-09-23

程远

教程 4.1w

UI设计福利！如何在PS上直接使用FontAwesome图标？

估计很多前端人员都知道FontAwesome是一套免费而且好用的Web字体图标，只要在CSS引入这个字体icon，它就可以直接通过class来生成一个图标，而且免费使用。目前图标数量已经更新至585个之多，包含常用的APP UI应用图标、品牌图标等。今天教大家如何将FontAwesome直接在Photoshop或AI上使用，这样日后做UI设计也方便多了，下面我们说说方法。

2015-08-27

程远

教程 5.3w

这个姿势有用！哪种字体最适合快速阅读？（附搭配建议）

编者按：什么样的字体兼具易认性和可读性？中英字体该如何搭配才能保证顺畅阅读？今天分享一篇专业的字体搭配科普文，有图有分析，还有贴心的中英字体搭配建议 >>>阿卡林：这个问题涉及了两个概念：易认性（Legibility）和可读性（Readability）。

2015-03-18

程远

教程 2.9w

网站字体有多重要？它帮网站提高了38%的流量！

多年前，麻省理工学院的研究人员已经证实字体影响我们的感受：差的字体使人无意识的反感，好的字体使我们感到高兴。如果字体能够影响我们的情绪，那同样会影响用户体验。几周前，我决定探究字体对用户体验的影响究竟有多大。

2014-08-29

程远

平面 11.2w

不会挑选字体？来看看字体的7种类型及特点

妈妈常说字如其人，到了设计师这里，字体就决定了产品的气质。如何给作品挑选一款合适的字体是非常重要的（完全无法直视设计师简历用宋体！！），那么，对字体完全无感的同学，得先赶紧了解下字体的性格和特点，才能灵活自如运用呀。

2014-07-15

程远

教程 2.3w

字体的私奔：超赞网页字体设计奇幻之旅

第一印象通常就是一种持续印象。不管你是否意识到，你的版式能够帮助用户在他们甚至还没有开始读一个字或者点击一个按钮之前建立一个体验。版式不仅仅是讲述一个故事，它告诉用户是这个网站的幕后以及这个背后的人是做什么的。

2013-12-16

程远

教程 1.5w

Mac Ｗin 网页字体显示方案

Mac在诞生的时候就把对字体处理尽可能接近原貌成为它很大的一个卖点，而在这些年亲身使用后，个人感觉Mac下的字体确实看起来比Win下舒服些，特别是在浏览网页时，字体比较“珠圆玉润”，可惜的是Mac目前并不是主流，大多数还是Win用户。所以即使你所使用是Mac，在设计仍然要记得平衡Win下的效果。Mac和Win的显示区别截了段文字做了个对比,很容易看得出来，字体显示起来是有很大的差别的。

2013-01-01

Roc

没有更多文章了

大家都在看

酷站推荐

文章 333

psd下载

文章 134

海报设计

文章 265

职场

文章 136

ICON

文章 204

神器推荐

文章 348

用户体验

文章 857

优秀网页设计

文章 582

字体下载

文章 134

热门频道

设计专题

热门设计知识精挑细选

细节猎人

1分钟小短文揣摩设计真谛

优设读报

行业资讯一站知晓

优设琅琊榜

顶尖设计作品聚集地

行业新闻

行业大事小事全知道

设计问答

高手大咖在线答疑解惑

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号：uisdc411

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注