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.

  1. 上传 ttf 格式字体文件
  2. 设置
    不同的设置生成的字体稍有差异,多试几次

  3. 下载字体

  4. 解压,拷贝到webapp下

    css 可以拷贝stylesheet.css中的

来自为知笔记(Wiz)

WebFont-前端字体的更多相关文章

  1. 使用 font-spider 对 webfont 网页字体进行压缩

    原文链接:使用 font-spider 对 webfont 网页字体进行压缩 随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体. 例如,个人博 ...

  2. webfont自定义字体的实现方案

    对于做Web前端的人来说,现在不知道webfont为何物似乎显得有点low了.webfont固然可爱,但似乎仍只可远观,不可亵玩.原因就在于中文字体库体积庞大,远比26个字母来的复杂.于是有同学就说了 ...

  3. font-spider利器对webfont网页字体压缩使用

    http://font-spider.org/ npm install font-spider -g hyheilizhitij(汉仪黑荔枝体简) //引入 @font-face{ font-fami ...

  4. 前端,字体图标,盒子显隐,2d形变,盒子阴影

    ---恢复内容开始--- 字体图标 1.将font-awesome-4.7.0文件夹放入项目内 2.在html head中连接 3.在body中导入 盒子显隐 1.使用高度显隐 <p>-- ...

  5. Web引用中文个性字体

    最近在前端开发时,因为设计的原因,要引用一些特殊字体(otf格式),但是后来发现这些字体文件非常大,平均每个要8mb左右,严重影响了网页效率.经过一番搜索,发现了前端字体压缩工具(只支持utf-8格式 ...

  6. CSS Web Fonts 网络字体

    Fonts 1. CSS font-family 在 CSS 中,可以使用 font-family 属性来指定字体,浏览器渲染文字时候会根据这个属性应用于元素.如果没有指定这个属性或者指定的字体不存在 ...

  7. 移动混合开发之android文件管理-->flexbox,webFont。

    增加操作栏,使用felxbox居中,felx相关参考网址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 使用webFont添加图标, ...

  8. WEB字体,多列布局和伸缩盒

    WEB字体 语法 @font-face{ font-family:""; src:url() format() ... } 兼容性写法 @font-face { font-fami ...

  9. 中文WebFont探索

    本文主要讲中文webFont的相关知识,包含了业界现状.WebFont优势.实现方案等. 一 业界使用WebFont现状 1.1 英文WebFont使用现状 英文版已使用非常广泛.比较有名的字体库:G ...

  10. Webfont 的兼容性问题[持续更新]

    低版安卓手机的 webview 显示不了,另外黑莓手机显示出来是这样: 生成工具: 离线字体生成工具:webfont 在线字体生成平台:icomoon.io, iconfont.cn均有问题 其他一些 ...

随机推荐

  1. SSH-Auditor:一款SSH弱密码探测工具

    SSH-Auditor:一款SSH弱密码探测工具 freebuf 2018-09-16  ssh-auditor是一款可帮助你探测所在网络中ssh弱密码的工具. 特性 以下操作ssh-auditor都 ...

  2. 微信小程序navigateTo /redirectTo/navigateBack 三者区别

    navigateTo 不会将旧页面出栈: redirectTo 会将旧页面出栈,再将需要跳转到的页面入栈: navigateBack 则是将页面栈最后一个元素出栈,因此倒数第二个元素会成为最后一个元素 ...

  3. 返回值为 Record类型的函数 初始化 Result

    function TMiTeC_Storage.GetPhysInfo(Index: integer): TDeviceInfo; begin Finalize(Result); FillChar(R ...

  4. Nginx 静态资源缓存配置

    示例 # Media: images, icons, video, audio, HTC location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|m ...

  5. [leetcode] 101. Symmetric Tree 对称树

    题目大意 #!/usr/bin/env python # coding=utf-8 # Date: 2018-08-30 """ https://leetcode.com ...

  6. eclipse工程 'cocostudio/CocoStudio.h' file not found

    android.mk里有这样配置: LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) $(call import-add-path,$(LOCAL_ ...

  7. 解决crontab不加载环境变量问题

    公司需要做异构库数据同步,由于之前实际使用过,且字段类型也兼容,满足业务场景,使用了阿里开源数据同步工具:datax,服务器上crontab定时脚本执行. 由于crontab只加载/ect/envir ...

  8. posix对线程的调整

    fork 当多线程进程调用fork创建子进程时,从fork返回时,只有调用fork的线程在进程内存在(其他线程在子进程中不存在,好比调用pthread_exit退出,不再拥有私有数据destructo ...

  9. 【转】嵌入式Linux文件系统启动脚本及分析

    原文网址:http://www.linuxidc.com/Linux/2011-03/33728.htm 在内核初始化完成后,嵌入式linux 文件系统的启动过程主要包含以下几个步骤: 1. 执行/s ...

  10. linux中内核延时函数 (转)

    第一类延时函数原型是:(忙等) void ndelay(unsigned long nsecs); void udelay(unsigned long usecs); void mdelay(unsi ...