前端对UI设计的特殊字体的处理

背景

UI在设计的时候针对某部分需要特殊展示的可能采用了特殊的字体。比如下图中的统计的数字，这个数字的字体在页面中用到的范围有限，只在统计的地方用到了字体中的数字。

解决方案

类似这种的固定的可以让UI切一张精灵图，前端自己拼起来；
将单个数字上传到iconfont上，前端下载字体文件后使用的时候再拼起来；
引入数字所用到的字体，引入后前端再使用；
对原字体进行裁决，只保留字体中的数字。然后再引入，再使用。

针对第一二种方案需要前端再拼一次不能够直接使用，第3种全字体的方式引入会带来额外的网络负担，页面字体显示可能会延时。所有采用第4种裁剪字体的方式。

裁剪字体

裁剪字体可以自己找一个字体编辑的软件，以下介绍win下的一款字体裁剪软件。

此处我用的是FontCreator下面介绍简单的使用技巧

安装完软件后[网上有绿色版的]打开软件

打开下载完成的字体，字体下载也挺好找的，或者让UI给一份。我此处是打开的已安装的字体。

删除不需要的文字，只保留自己需要的。

将裁剪完的字体另存为一个新的字体

可以看到裁剪完的字体大小还是比较理想的

将字体引入到页面中进行使用

@font-face{font-family:'fbfristpage-number';src:url('../font/firstpage-number.ttf') format('truetype');
}
复制代码

转载于:https://juejin.im/post/5c65158b51882524c84f0712

前端对UI设计的特殊字体的处理相关推荐

html还原ui,前端高度还原设计稿（字体篇）
前言: 以前前端都是拿到psd设计图,需要自己用ps切图,需要自己在psd上面一个个去量设计的大小和间距,而现在一般都是要求设计师把设计稿直接上传到蓝湖上面,通过蓝湖的标注来写出前端代码!下面我就前端 ...
【UI设计培训】字体设计-偏旁部首变形
UI设计培训中字体设计也是非常重要的一节课,字体在UI设计岗位中可以说用到的频率是非常高的,是设计师必须学会并且要有娴熟运用的一项必备技能,在进行汉字设计的时候,可以把汉字拆分成几个偏旁部首的形式进行 ...
android ui设计最新字体,ui用什么字体_安卓ui设计用什么字体
1 ui用什么字体 UI中字体使用的关键因素. 1.可读性. ui用什么字体_安卓ui设计用什么字体,可读性是UI中字体所需考虑的首要因素.字母字形必须清晰可辨,作为UI元素,其中不同的字母必须可以被 ...
ui设计移动端字体适配_移动端UI设计规范
一.边距.间距原则:边距(左右)要大于间距(上下). 模块边距 10px.12px.15px.16px 15px 常用 10px 最小,要展示更多的内容才用模块间距 8px.10px.15px.1 ...
ui设计移动端字体适配_移动端UI设计规范全方位汇总(附演示PPT下载）
很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,对做UI设计的基础概念也没有清晰的认识,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页 ...
ui设计移动端字体适配_JavaScript之独立使用lib-flexible.js适配移动端UI设计750px设计图...
本篇文章主要讲述JavaScript之独立使用lib-flexible.js适配移动端UI设计750px设计图,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. 最近在和设计沟通关 ...
ui设计移动端字体适配_移动端字体ui设计移动端界面设计规范
做字体设计和图标设计,应该攻读什么专业? UI设计需要学习几个月能找工作? 您好:关于需要学习几个月才能找到一份工作,我的理解和建议如下: 1?由于UI只是设计者手中的一个工具,它是表达内部设计思想的 ...
ui设计移动端字体适配_超全面的移动端UI 设计规范整理汇总
很多新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是十分清楚,很多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不那么尽如人意.本文整理汇总了一些 ...
ui设计移动端字体适配_学习UI设计的你要掌握移动端字体七准则
原标题:学习UI设计的你要掌握移动端字体七准则字体有许多值得深究的细节,细微的设计汇聚起来,对阅读体验会产生巨大影响. 可能你听过这说法,好的字体是隐形的,不过更准确来说,应该是好的字体让阅读行为毫 ...
Web前端：UI设计对提高用户参与度的重要性
创建网站或应用程序时,用户界面设计至关重要,不容忽视.用户界面(UI)设计是提高网站流量和转化率的重要策略.它创造了出色的用户体验和忠诚的客户. 关于用户界面设计,最小的调整可能会产生重大影响.像按钮 ...

前端对UI设计的特殊字体的处理

背景

解决方案

裁剪字体

前端对UI设计的特殊字体的处理相关推荐

最新文章

热门文章