前端页面遇到稀有字体如何处理

这里只是记录一下自己在写页面时遇到稀有字体，也不是艺术字，只是一般电脑都不会有的字体怎么办。我们知道字体是读取本地服务的字体的，如果没有就会用默认的。我们老板对产品要求比较高，字体必须跟设计稿一模一样，但是我们优秀的设计师就喜欢用一些稀有字体，这怎么办呢，相信大家都知道css3支持读取本地字体文件，从而解决了这个问题，说着简单，具体要怎么做呢。
首先我跟设计师要了字体文件方正兰亭黑.TTF,然后转到https://www.fontsquirrel.com/tools/webfont-generator这个网站，这个网站是把我们的字体文件转码成各种格式的文件，使其兼容安卓 ios ie webkit firfox，1 上传字体文件 2（要上传完成后再执行此操作）选择EXPERT...

3选择需要转码的文件类型（我就全选了）4同意条款 5 download
解压文件里面有个stylesheet.css文件，里面就是具体用法，把代码贴到自己的css文件里，把生成的字体文件（解压文件根目录下的几个文件）放到自己项目中的文件夹中，路径自己定，那段css的url的相对路径对了就行。然后就可以用了。里面有个demo.html 不会用的可以看这个demo
我也是参照司徒正美的博客实现的http://www.cnblogs.com/rubylouvre/archive/2011/06/19/2084875.html

前端页面遇到稀有字体如何处理相关推荐

前端页面性能优化 - 字体加载优化
相比于英文的字库来说,中文字库的体积非常之大,小则1M,动辄几十 M 的体积非常常见.所以在前端页面性能优化中,字体加载的优化就显得尤为重要.阅读了相关的知识和文章,在研究了市面上字体加载方案之后,我 ...
前端页面引入外部字体 @font-face 的使用方法
通过 @font-face 属性来引入外部字体代码如下 @font-face {font-family: 'arailRegular';src: url('../font/Arial-Black.t ...
前端页面字体小于12px
前端页面最小为12px,如果设置12px一下,浏览器会默认将字体变为12px,有时候有的需求需要12px以下的字体,需要使用css的 transform属性 font-size: 12px; tra ...
实现一个博客系统(前端页面设计)
博客系统的四个页面展示效果: 注意CSS有一些隐式规定,下面代码的状态:上下边距不是50px(不是两者边距之和,而是他们的最大值);上下边距塌方问题,况且只在垂直方向有,水平方向就是他们的和:况且他的 ...
前端页面加载缓慢的原因和性能优化问题
前端页面加载缓慢的原因和性能优化问题一.页面加载缓慢的原因二.前端性能优化方法一.页面加载缓慢的原因当我们打开一个网页,页面加载比较缓慢时,可能原因有以下几点: (1)过多的http请求 (2 ...
前端怎么加粗字体_【好程序员独家】100道前端面试题（精选版含答案）
为了方便各位热爱前端的小伙伴能够更加便捷的学习到前端,好程序员特意为大家整理100道独家HTML5大前端面试题!希望能给你带来帮助! 一.Doctype的作用?严格模式和混杂模式的区分,以及如何触发这 ...
基于Jquery实现登录功能的前端页面
本篇文章讲解如何用jquery完成登录功能的前端页面展示 html部分: <div class="name"><label>用户名:</label&g ...
前端加载自定义字体及速度优化
今天是2.14情人节,也是另一个重要的日子,那就是我的第一个全栈项目上线啦~~~ www.daren.com 这个是公司的官网,采用Python+Django做后端,前端也用了gulp自动化工作流,使 ...
WebStorm开发应用——前端页面
由于课程设计的需要,第一次上手WebStorm开发一个手机端应用.在这之前,我利用html,css,js写前端页面用得比较多的还是eclipse和MyEclipse,不过总感觉做出的页面不尽如人意 ...

前端页面遇到稀有字体如何处理

前端页面遇到稀有字体如何处理相关推荐

最新文章

热门文章