前端UI设计

字体百科全书,(珍藏多年的资源、技巧与心得),你一定要知道关于字

2020-09-06  本文已影响0人  哒乐分享

你一定会用到的一个东西——字体

好看的字体适用于各个地方:海报、封面、壁纸、PPT展示、个人名片、网页设计……

字体查询

在一些网站上我们常常会看到排版精美的网页,其中精美好看的字体尤为吸引眼球

如何查找这些字体的名称呢?

下面介绍两种查询网页字体的方法:

一、审查元素查看网页字体

在前期推送《电脑小白的成长之路(下)》中介绍了关于浏览器的一些操作技巧,错过的小伙伴一定要去看看,小编耗时数小时的心血之作~

以【摩拜单车官网】为例

选中我们需要【搜寻的文字

鼠标右击选择【审查元素

Elements右侧styles栏中可以看到font-family中已经列出了网页中的所有字体名称

除此之外,字体样式也可以查看到

font-size  字体大小

color  字体颜色

font-style  字体样式

font-weight  字体粗细


以上属于CSS语言

浏览器网页三大语言:

HTML定义了网页内容

CSS描述了网页的布局

JavaScript网页的行为


超文本标记语言,浏览器网页内容结构使用的语言,外文名称HyperText Markup Language,缩写为HTML。

层叠样式表,外文名称Cascading Style Sheets,一种用来表现HTML或XML文件样式的计算机语言。CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

Javascript,一种直译式脚本语言,最早用来给HTML页面增加动态功能。随着逐渐发展,JavaScript控制了网页的行为,用于用户与网页交互等操作。


感兴趣的小伙伴可以参考《电脑小白的成长之路(下)》与《斜杠青年不可错过的福利网站》。两篇文章详细介绍了关于浏览器的一些高级操作与浏览器网页语言教程学习~

二、WhatFont插件

这是一款神器而强大的插件

WhatFont能做什么?


找到网页中使用的字体最简单的方法不是Firebug或Webkit检查器,而是WhatFont插件。只需要悬停在文本上单击即可轻轻松松显示关于字体的所有信息。


WhatFont插件免费吗?

免费,但目前测试只有谷歌浏览器能够使用,其他浏览器点击无效,因为它是一款谷歌浏览器插件。

如何下载字体?

在这里小编强烈推荐一款珍藏多年的字体网站,免费下载你需要的字体~

字体天下

网址:http://www.fonts.net.cn/



相信很多小伙伴都听说过这款字体网站,如果你还没听说过,赶紧收藏!!!

【字体天下】收集了各种商免非商免字体,并免费提供下载链接。

中文字体

英文字体

图形字体

字体教程

对搜索字体进行文本预览查看效果

中文字体

几乎你见过的所有中文字体你在这里都能搜索到并免费下载

网站贴心地将字体进行了商业免费、淘宝天猫免费、京东免费等栏,再也不用担心侵权了!


英文字体

各种具有异国风情的字母在这里等你~

一款好用的英文字体能一瞬间将比格提升至满格


图形字体

最有意思的字体

字体与图形的碰撞创造除了各种有意思的效果

字母也可以萌萌哒,文字也可以酷酷滴



字体教程

这里是字体界的前沿地段

各种刚刚破土而生的字体都在这里首先免费推广发布

在这里有字体设计大师创造的字体传奇、创造字体的经验与教程、字体界的风起云涌~


设计师都在用的字体设计工具

字由

网址:https://www.hellofont.cn/home

字由网站同样收藏了很多字体,可以免费下载字体安装包

值得一提的是字由网站提供了字体效果模板展示,我们可以快速了解字体的使用效果。


AI识字

通过上传文字图片采用AI自动识别文字样式

非会员每天使用次数为5次

而且对图片要求较高,有需要的小伙伴可以尝试使用



大力推荐【字由】客户端

快速应用字体三步骤:

激活字体

选中应用字体

点击已激活字体


字由,让字体设计简单快速便捷。让设计更加专注!


如何安装字体?

下载字体压缩包

解压压缩包内容,选中字体文件

复制到C:/Windows/Fonts中即自动安装到电脑


字体设计

自定义字体设计

这里仅以PPT为例介绍

选择文本框-输入需要自定义形状的文字

绘制一块矩形覆盖文字(形状与文字上下位置并无要求)

选择绘图工具-格式-合并形状-相交

选择编辑形状-编辑顶点-调整控点改变字体形状


喜欢就点个赞吧~

关注我,每天带你成长一点!

关注【乐小污】,本期隐藏福利等你哟~


上一篇 下一篇

猜你喜欢

热点阅读