字体设计

一直不知道手机端用的什么字体，只是觉得类似雅黑，直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题。 前人已栽树，后人我就直接转来吧…… 回想2年前刚开始接触手机项目，接到PSD稿后，发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计，于是我写页面的时候也定义 font-family 为微软雅黑，后来发到线上后，细心的产品经理发现页面的字体不是微软雅黑，要求马上修改，我就惊呆了，还跟产品争执一番。 后来了解到的手机系统 ios、android 等是不支持微软雅黑字体，为了满足产品的需要，保证视觉稿的还原度，手机端是如何定义微软雅黑字体呢？ 相信大家会想到 @font-face 定义为微软雅黑字体并存放到 web 服务器上，在需要使用时被自动下载 1 2 3 4 5 6 7 8 @font-face { font-family: 'MicrosoftYaHei' ; src: url( 'MicrosoftYaHei.eot' ); /* IE9 Compat Modes */ src: url( 'MicrosoftYaHei.eot?#iefix' ) format( 'embedded-opentype' ), /* IE6-IE8 */ url( 'MicrosoftYaHei.woff' ) format( 'woff' ), /* Modern

前言 记得做PC端页面的时候，字体一般设置为微软雅黑，现在做起移动端页面来了，设计师们一般都还把字体设置为微软雅黑字体，但是做出来后，测试的时候发现页面中的字体不是微软雅黑，怎么办？ 后来了解到的手机系统 ios、android 等是不支持微软雅黑字体。为了满足产品的需要，保证视觉稿的还原度，手机端是如何定义微软雅黑字体呢？ @font-face的使用 @font-face { font-family: 'MicrosoftYaHei'; src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */ src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */ url('MicrosoftYaHei.ttf') format('truetype'), /* Safari, Android, iOS */ url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */ } 有关 @font-face 的使用，大漠的这篇《 CSS3

《黑客与设计：剖析设计之美的秘密》 基本信息 原书名：Design for hackers:reverse engineering beauty 原出版社： Wiley 作者： (美)David Kadavy 译者： 苑永凯 丛书名： 图灵交互设计丛书 出版社：人民邮电出版社 ISBN：9787115345370 上架时间：2014-3-19 出版日期：2014 年4月 开本：16开 页码：214 版次：1-1 所属分类：计算机 > 安全 > 网络安全/防火墙/黑客 更多关于》》》 《黑客与设计：剖析设计之美的秘密》 编辑推荐　 黑客们崇尚分享，所以他们可以从相关社团及网上找到各种编程问题的解决方案，快速地完成开发项目。但是，对于设计，问题就不那么简单了。 　　许多设计教学书籍都有着大量的“须知”与“切忌”条目，以期让人能够迅速了解设计的惯例及规程，但这种表面化、程式化的方式往往无法令喜欢探究事物本质的黑客们满意。为了让自己的作品精彩出众，他们往往希望追溯到设计的源头，了解设计现象及趋势的本质。本书采用逆向解析方式，庖丁解牛般剖析了一众经典设计。从文艺复兴时期的雕塑，到印象派绘画，再到现代的Mac OS X的Aqua界面以及Twitter的页面设计，还原历史真相，细说风格由来，逐步讲解色彩、排版、比例等设计理论，并在此基础上提出了大量真切可行的设计最佳实践。读来令人耳目一新

一、前言 说起Iconfont，对大多数人来说可能不是什么新的技术了，现在好多大网站已经开始使用Iconfont。博主今天主要是简单说一下它的使用方法，聊聊使用它时可能遇到哪些坑，不熟悉的同学可以简要看一下，资深了解的同学，如果发现问题，还请指正。 二、什么是Iconfont 有的同学可能会问什么是Iconfont ？ 其实，Iconfont 就是指用字体文件取代图片文件，来展示图标、特殊字体等元素的一种方法。 那么哪些网站在用它呢？有什么优缺点？以及如何使用它，接下来我们一一解答这几个问题。 首先让我们来看看都哪些网站使用了Iconfont 。 淘宝用到的地方 新浪微博用到的地方 还有像豆瓣，一淘，想玩等网站也都用到了它，我就不一一粘结图出来了，有兴趣的同学可以去瞧一瞧。 看完别人用到的地方，大家是不是也开始跃跃欲试了呢？ 不过在具体说使用它之前，还需了解一下Iconfont 有什么优缺点，到底适不适合我们在项目中使用。 先来看看优点： 加载文件体积小。 可以直接通过css的font-size，color修改它的大小和颜色，对于需要缩放多个尺寸的图标，是个很好的解决方案。 支持一些css3对文字的效果，例如：阴影、旋转、透明度。 兼容低版本浏览器。 不过它也有局限性，不能作为css sprite的替代品，我们来看看缺点： 矢量图只能是纯色的。 制作门槛高，耗时长，维护成本也很高。

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。 通过 CSS3，web 设计师可以使用他们喜欢的任意字体。 当您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。 您“自己的”的字体是在 CSS3 @font-face 规则中定义的。 @font-face的语法规则： @font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; [font-stretch: <stretch>]; [unicode-range: <unicode-range>]; } font-family定义字体的名称，src用来指定字体文件地址，可以是相对地址或者绝对地址。@font-face规则的各描述属性说明如下： 描述符 值 描述 font-family name 必需。规定字体的名称。 src URL 必需。定义字体文件的 URL。 font-stretch normal condensed ultra-condensed extra-condensed semi-condensed

永远都在寻觅字体设计的灵感。夏天过后，我买了一套便宜的书法钢笔，说服自己，它会让我的鸡爬字产生脱胎换骨的变化。在浪费了一个星期和几 永远都在寻觅字体设计的灵感。夏天过后，我买了一套便宜的书法钢笔，说服自己，它会让我的鸡爬字产生脱胎换骨的变化。在浪费了一个星期和几打白纸之后，我还是没得到什么有趣的或是有稍微艺术气息的东西。最后，在一天晚上，疲倦而失望的我，在用完了黑色墨水之后，插入了一支红色的笔芯，然后写下了下面这一套字母表——之后它变成了我的 Joules字族。我想，如果我在这个案例研究中把它如何变成字体的过程写出来，大家也许会感兴趣。 下面是那天晚上我写下的好多张草图之一： 特写： 超级特写：我迫不及待想使用的一个大写A。 从草图到字体 从草图创建Joules字体的过程，一如我之前的 两篇文章中所写的，我将草图扫描输入，下面是扫描稿在Photoshop里面转为黑白位图模式之后的样子。 注意原稿位图中包含的粗糙杂点： 通常，我会把这些位图处理干净之后才导入Fontlab，但这次例外。下面是第一个步骤，将位图导入ScanFont： 在ScanFont中的一个特写： 我把这个新字符复制到FontLab中的正确位置。为了给你体验一下在FontLab中是如何进行调整的，下面放大显示了导入进来的粗糙的A。我选择了一个有问题的部分。 然后开始删去那些令人不快的节点：

1.前言 可能有的同学已经放假在家了，我也快了。最近不想聊具体的技术了，过年了聊点轻松的东西。但是又不想偏离编程太远，所以我今天聊聊我们常用的一些编程字体。在阅读代码的时候眼睛需要以不同寻常的方式移动（垂直和水平方向），这与书籍类阅读有很大的不同（通常沿着同一方向的文本而滑动）。所以字体也是生产力的组成部分。接下来介绍我一些常用的字体。 2. Consolas Consolas 我用了挺久的，那时候我还在用 eclipse 。这是一套等宽字体，属无衬线字体，由丹麦设计师 Lucas de Groot 设计，这套字型使用了微软的 ClearType 字型平滑技术。 使用 Microsoft Windows 作为开发 OS 环境感觉更加明显。现在我已经不太使用这种字体了。 3. Source Code Pro 时间长了，审美疲劳了，我又切换到了另一款字体 Source Code Pro 。它是这样的： 它由大名鼎鼎的 Adobe 公司发布的一款开源且完全免费的等宽编程字体，从名字上你就知道它是干啥的。在 MacOS 和 Windows 上的阅读感都不错。 4. Inconsolata 码农太容易“喜新厌旧”了， Inconsolata 是同事那里 copy 来的: 我不知道它跟 Consolas 之间是什么关系，但是这个比 Consolas 细腻了不少。宽度恰好是半角

前端基础CSS(3) 一、文本属性和字体属性（常用的） 1、文本属性 　　text-align:left|right|center|justify（两端对齐，只适用于英文）; /*对齐方式*/ 　　color:色值; /*文本颜色*/ 　　text-indent:2em; /*首行缩进，建议单位用em*/ 　　text-decoration:none|underline|overline|line-through|inherit; 　　line-height:高度值; 2、字体属性 　　font-weight:normal|bold|border|lighter|100~900|inherit; /*100~300没区别*/ 　　font-family:字体; 　　a、网页中不是所有字体都能显示，因为这个字体要看用户的电脑里面装没装，比如你设置：font-family:”华文彩云”;如果用户电脑里面没有这个字体，那么就会变成宋体 ; 　　　　b、为了防止用户电脑里面没有你设置的那个字体，我们通常写多个用逗号隔开的备选字体，如：font-family: "Times New Roman","微软雅黑";备选字体可以有无数个，默认显示第一个，没有安装第一个就显示第二个，以此类推，都没装就显示宋体 ; 　　　　c、我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体

　 iconfont 技术的主要是将图标转化为字体来减少应用体积。如需在项目中使用iconfont技术，图标矢量图一开始都应合并转化为字体库。 优点： 减小体积，字体文件比图片要小 图标保真缩放，解决2x/3x乃至将来的nx图问题 方便更改颜色大小，图片复用 缺点： 只适用于纯色icon 使用unicode字符难以理解 需要维护字体库 字体管理 字体管理方式分为两种：在线管理（ iconfont.cn ）和FontForge工具。 字体库生成 这里推荐两个比较好用的网站iconmoon和iconfon，个人在做网页的时候，经常会在iconmoon上制作字体图标。如果设计师给你了字体库最好，如果给你的是 .svg 文件，就需要自己去转为字体库了。这里以iconmoon为例制作字体库，iconmoon需要翻墙。 1、导入设计师给的 .svg 文件 2、点击Generate Font 生成字体库，如下图 3、打开下载的文件夹，如下图 4、将.ttf 的字体库，导入项目中，要确保在下图路径中可以看到字体库 5、在plist文件中，添加字段Fonts provided by application并在该字段下添加GWH_search.ttf。工程中便可使用字体库了。 6、打开demo.html，可以看到图标字体的Unicode编码

提问 提需求的人图标样式(颜色)要换？ 图标如何满足不同的分辨率以及清晰度？ 图标太多导致项目体积越来越大，如何瘦身？ 按钮状态切换只用一个图标，例如点击和松开，甚至更多的状态？ 用字体来代替图标 阿里iconfont 轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。 灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。 跨平台：支持android，iOS，web，微信小程序。 兼容性：网页字体支持所有现代浏览器，包括IE低版本。 iconfont 制作的基本原理 Unicode 码表是一个很大的表格，每个表格都对应一个 Unicode 字符，每个字符都有一个 Unicode 码值对应，如 “李” 对应 “\u674e”, “靖” 对应 “\u9756”。因为码表很大，有部分表格并没有对应的字符，但是它有自己的码值。iconfont 的制作，首先将绘制的图形（可以是一张图片、也可以是一个 svg 描述）通过工具或者程序生成文字icon