WebFont-前端字体
WebFont-前端字体
前端设计时使用了一些不常用的字体,如何在客户的浏览器中正确展示?
解决方案是使用webfont,将字体置于服务端,利用 css 中的font-family
进行设置,客户端展现时加载到浏览器中。
WebFont
webfont一般使用 4 种格式,即 eot / svg / ttf / woff
1 首先需要定义字体:
@font-face { font-family:'fzztjw'; src: url('../fonts/fzztjw-webfont.eot'); src: url('../fonts/fzztjw-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/fzztjw-webfont.woff') format('woff'), url('../fonts/fzztjw-webfont.ttf') format('truetype'), url('../fonts/fzztjw-webfont.svg#ekcososregular') format('svg'); font-weight: normal; font-style: normal; }
2 然后就可以在css中使用了(方正藏体简体):
font-family: 'fzztjw'
效果如下:
字体转换
我们通常获得的字体是ttf格式,如何获取到其他的格式?
利用在线转换网站进行转换就OK了,推荐 fontsquirrel.
- 上传 ttf 格式字体文件
设置
不同的设置生成的字体稍有差异,多试几次
下载字体
- 解压,拷贝到webapp下
css 可以拷贝stylesheet.css中的
来自为知笔记(Wiz)
WebFont-前端字体的更多相关文章
- 使用 font-spider 对 webfont 网页字体进行压缩
原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...
- webfont自定义字体的实现方案
对于做Web前端的人来说,现在不知道webfont为何物似乎显得有点low了.webfont固然可爱,但似乎仍只可远观,不可亵玩.原因就在于中文字体库体积庞大,远比26个字母来的复杂.于是有同学就说了 ...
- font-spider利器对webfont网页字体压缩使用
http://font-spider.org/ npm install font-spider -g hyheilizhitij(汉仪黑荔枝体简) //引入 @font-face{ font-fami ...
- 前端,字体图标,盒子显隐,2d形变,盒子阴影
---恢复内容开始--- 字体图标 1.将font-awesome-4.7.0文件夹放入项目内 2.在html head中连接 3.在body中导入 盒子显隐 1.使用高度显隐 <p>-- ...
- Web引用中文个性字体
最近在前端开发时,因为设计的原因,要引用一些特殊字体(otf格式),但是后来发现这些字体文件非常大,平均每个要8mb左右,严重影响了网页效率.经过一番搜索,发现了前端字体压缩工具(只支持utf-8格式 ...
- CSS Web Fonts 网络字体
Fonts 1. CSS font-family 在 CSS 中,可以使用 font-family 属性来指定字体,浏览器渲染文字时候会根据这个属性应用于元素.如果没有指定这个属性或者指定的字体不存在 ...
- 移动混合开发之android文件管理-->flexbox,webFont。
增加操作栏,使用felxbox居中,felx相关参考网址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 使用webFont添加图标, ...
- WEB字体,多列布局和伸缩盒
WEB字体 语法 @font-face{ font-family:""; src:url() format() ... } 兼容性写法 @font-face { font-fami ...
- 中文WebFont探索
本文主要讲中文webFont的相关知识,包含了业界现状.WebFont优势.实现方案等. 一 业界使用WebFont现状 1.1 英文WebFont使用现状 英文版已使用非常广泛.比较有名的字体库:G ...
- Webfont 的兼容性问题[持续更新]
低版安卓手机的 webview 显示不了,另外黑莓手机显示出来是这样: 生成工具: 离线字体生成工具:webfont 在线字体生成平台:icomoon.io, iconfont.cn均有问题 其他一些 ...
随机推荐
- SSH-Auditor:一款SSH弱密码探测工具
SSH-Auditor:一款SSH弱密码探测工具 freebuf 2018-09-16 ssh-auditor是一款可帮助你探测所在网络中ssh弱密码的工具. 特性 以下操作ssh-auditor都 ...
- 微信小程序navigateTo /redirectTo/navigateBack 三者区别
navigateTo 不会将旧页面出栈: redirectTo 会将旧页面出栈,再将需要跳转到的页面入栈: navigateBack 则是将页面栈最后一个元素出栈,因此倒数第二个元素会成为最后一个元素 ...
- 返回值为 Record类型的函数 初始化 Result
function TMiTeC_Storage.GetPhysInfo(Index: integer): TDeviceInfo; begin Finalize(Result); FillChar(R ...
- Nginx 静态资源缓存配置
示例 # Media: images, icons, video, audio, HTC location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|m ...
- [leetcode] 101. Symmetric Tree 对称树
题目大意 #!/usr/bin/env python # coding=utf-8 # Date: 2018-08-30 """ https://leetcode.com ...
- eclipse工程 'cocostudio/CocoStudio.h' file not found
android.mk里有这样配置: LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) $(call import-add-path,$(LOCAL_ ...
- 解决crontab不加载环境变量问题
公司需要做异构库数据同步,由于之前实际使用过,且字段类型也兼容,满足业务场景,使用了阿里开源数据同步工具:datax,服务器上crontab定时脚本执行. 由于crontab只加载/ect/envir ...
- posix对线程的调整
fork 当多线程进程调用fork创建子进程时,从fork返回时,只有调用fork的线程在进程内存在(其他线程在子进程中不存在,好比调用pthread_exit退出,不再拥有私有数据destructo ...
- 【转】嵌入式Linux文件系统启动脚本及分析
原文网址:http://www.linuxidc.com/Linux/2011-03/33728.htm 在内核初始化完成后,嵌入式linux 文件系统的启动过程主要包含以下几个步骤: 1. 执行/s ...
- linux中内核延时函数 (转)
第一类延时函数原型是:(忙等) void ndelay(unsigned long nsecs); void udelay(unsigned long usecs); void mdelay(unsi ...