精华内容
下载资源
问答
  • 中文字体都很大!!!)。这样在加载这个页面的时候,对于用户的流量消耗比较大。所以我们需要对字体文件进行优化~一、在线工具压缩1.1、中文字体在线压缩需要将Html+Css+Font项目打包成压缩包,上传到上面的网站,...

    在网站中我们常常需要为了几个字体的效果,而引对应的字体文件(几M到十几M.中文字体都很大!!!)。这样在加载这个页面的时候,对于用户的流量消耗比较大。所以我们需要对字体文件进行优化~

    一、在线工具压缩

    1.1、中文字体在线压缩

    需要将Html+Css+Font项目打包成压缩包,上传到上面的网站,然后下载优化过的字体

    1.2、使用云字体

    或者使用CDN对字体文件进行加速

    二、本地自动化工具优化

    字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

    format,png

    2.1、font-spirder安装

    先安装好 NodeJS,然后在命令提示符执行下面语句进行全局安装

    npm install font-spider -g

    依赖python的哦,所以安装python2.7 并设置系统的环境变量

    2.2、自定义web字体的声明

    注意路径的书写,网页显示正常的情况下在进行优化

    /*声明 WebFont*/

    @font-face {

    font-family: 'pinghei';

    src: url('../font/pinghei.eot');

    src:

    url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),

    url('../font/pinghei.woff') format('woff'),

    url('../font/pinghei.ttf') format('truetype'),

    url('../font/pinghei.svg') format('svg');

    font-weight: normal;

    font-style: normal;

    }

    /*使用选择器指定字体*/

    .home h1 {

    font-family: 'pinghei';

    }

    /*

    1. @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成

    2. 开发阶段请使用相对路径的 CSS 与 WebFont

    3. 注意字体文件的格式,需要是eot、woff、ttf或者svg

    */

    2.3、font-spirder使用

    在你项目的根目录运行命令提示符

    font-spider ./*.html

    *表示所有的html,也可以html文件名来指定优化那个html引用的字体文件

    font-spider或备份原来的字体到.font-spider文件夹中,当然也可以自己备份一下~

    format,png

    三、自定义字符集

    IconMoon是一个优秀的免费创建自定网页图标字体的工具。提供一个在线的字体制作APP,也提供离线版的Chrome插件, 同时还提供免费开源的图标供大家选用。支持上传SVG格式的图标或者单个字符。

    EverythingFonts提供了丰富的字体转换工具,可以把ttf,otf,wotf等字体转换为SVG格式。

    使用上面两个工具我们就能够把自己喜欢的开源字符“搬”到我们的自定义字体中去。

    3)FontCreator是世界上最流行的字体编辑器之一。 先进的功能集使其成为专业人士的首选工具,其直观界面足以满足任何专业级别的用户的需求。

    format,png

    下载安装后,导入你要用的字体然后编辑,保留需要用到的字符

    附上字体格式在线转换

    展开全文
  • PS五角星形状使用方法?... html中字体如何实现加粗(方法介绍)字体的修饰美化在一个网页的页面也是很重要的,美化的好的网页会给人带来直观的视觉冲击,今天我就来讲述以下在html中字体的加粗是怎...

    PS五角星形状使用方法?_WEB前端开发

    PS五角星形状使用方法:首先点击左侧工具栏中的“矩形工具”子选项中的“多边形工具”;然后点击上方工具栏中的“多边形”选项,并把“星形”前面的选中“打对勾”;最后在画布上画出适合大小的星形即可。

    bMjmMr.jpg

    html中字体如何实现加粗(方法介绍)

    字体的修饰美化在一个网页的页面也是很重要的,美化的好的网页会给人带来直观的视觉冲击,今天我就来讲述以下在html中字体的加粗是怎么实现的,大家一起来看看吧。ps工具栏窗口隐藏了怎么办?_WEB前端开发

    解决方法:1、打开ps,点击菜单栏中的“窗口”按钮;2、在弹窗中点击“工作区”按钮;3、在弹窗中选择复位“基本功能”命令即可。

    字体加粗属性

    .类名{

    font-weight: 700;//加粗

    font-weight: 400;//正常

    }

    字体加粗标签

    我是字体加粗b标签

    我是字体加粗strong标签

    感谢大家的阅读,希望大家收益多多。

    本文转自:https://blog.csdn.net/lovexiuwei/article/details/82668448

    推荐教程: 《HTML教程》

    展开全文
  • 当只有一个活动页面或者一小段文字需要引入特殊字体字体文件往往会有十几兆或者几十兆,特别在移动端或者弱网情况下有相当差的体验,一个14M左右的文件就需要加载12秒... 所以针对一些小范围使用字体文件或者...

    当只有一个活动页面或者一小段文字需要引入特殊字体,字体文件往往会有十几兆或者几十兆,特别在移动端或者弱网情况下有相当差的体验,一个14M左右的文件就需要加载12秒...

    所以针对一些小范围使用字体文件或者页面变化不大的项目可以考虑把常用字体抽取出来再生成一个小的字体文件,再进行引入。

    发现 fontmin 这个框架比较符合需求,它是第一个纯 JavaScript 字体子集化方案,可以使用node命令或者可视化窗口的形式进行操作

    官网地址:http://ecomfe.github.io/fontmin/#banner

    github地址:https://github.com/ecomfe/fontmin

    800多kb生成后的字体文件只有十几kb,最后在项目中引入即可。

    如果是整个web网站使用不适合,建议使用cdn加速的字体库 或者寻找其他方案

    展开全文
  • ==============2017年12月04日更新===============之前内容中提到的字体剪裁文件:...third=0经过测试发现对于一些中文字体并不能起到剪裁的效果,后来经过多方搜索发现谷歌提供的sfntly中的sfnttool.jar能彻底...

    ==============2017年12月04日更新===============

    之前内容中提到的字体剪裁文件:http://yun.baidu.com/share/link?shareid=4190484354&uk=2187713405&third=0

    经过测试发现对于一些中文字体并不能起到剪裁的效果,后来经过多方搜索发现谷歌提供的sfntly中的sfnttool.jar能彻底起到中文字体文件剪裁的目的。具体方法参考:http://blog.csdn.net/github_32626373/article/details/50083731

    android的安装:https://www.cnblogs.com/zoupeiyang/p/4034517.html 只需要前两步就可以,安装adk,然后配置环境变量。

    ant的安装:http://blog.csdn.net/wanghjbuf/article/details/54773440

    ==============以下是之前内容===============

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中。但是大家会或多或少的发现,@font-face对英文字符很管用,但是对于中文字符往往会失效。

    我通过上网搜索以及自己的失败经验认为,造成这个问题的主要原因就是中文字体太大,基本都是在3M以上,载入速度慢,导致字体效果不显示。

    那显而易见,解决这个问题的思路就是减小中文字体的大小。

    中文字体之所以大,就是汉字太多。但是大多数汉字可能是我们用不到的,所以我们可以将我们需要的字从字体文件中提取出来,生成小字体文件。

    方法就是用这款软件:http://yun.baidu.com/share/link?shareid=4190484354&uk=2187713405&third=0

    输入你需要的汉字,点击生成就可以生成你需要的ttf字体小文件了。

    然后就可以在网页中用@font-face引用了。

    但是考虑到浏览器兼容问题,需要将ttf格式的字体转换成eot svg woff等格式的字体文件,那么推荐一个好用的免费的在线字体转换格式工具: http://www.font2web.com/ 或者搜:FontCreator 下载链接:http://xz6.mqego.com/soft2/fontcreatorhanhua.zip

    这还有个ttf转eot的exe软件http://yun.baidu.com/share/link?shareid=4207634902&uk=2187713405&third=0 只要把ttf拖到软件上就可以自动生成eot 存放目录跟ttf文件同步

    当然,在我们制作小字体文件的时候可能会有重复的文字,为了进一步精简,可以用这个文件:http://yun.baidu.com/s/1c0hnfZM

    不过还是建议没事儿别引用自定义中文字体,如果在文章页引用自定义中文字体,那么就没办法制作小字体文件了。能用默认的就用默认的吧。

    展开全文
  • {font-family:"微软雅黑";}或者{font-family:"Microsoft Yahei";}如果在文件编码(GB2312、UTF-8 ...使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。unicode编码的微软雅黑表示如下:{font-family: "\5FA...
  • 在编写网站的时候,或多或少都会用到一些网络上的字体,CSS 3 中虽然加入了对 Web Fonts(网络字体)的支持,但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验。例如默认情况下,在 Web Fonts...
  • 但实际开发中,每个浏览器都有自己的安全字体(这个对字体(font-family)的定义就是一个安全字体。每种操作系统都有自己默认安装的字体,浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不...
  • web字体

    2021-02-02 12:04:09
    标准的简体中文web字体: Windows OS X 黑体:SimHei 冬青黑体: Hiragino Sans GB [NEW FOR SNOW LEOPARD] 宋体:SimSun 华文细黑:STHeiti Light [STXihei] 新宋体:NSimSun 华文黑体:STHeiti 仿宋:FangSong 华文...
  • @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能...
  • 三大手机系统IOS、android、winphone支持的字体ios 系统默认中文字体是Heiti SC默认英文字体是Helvetica默认数字字体是HelveticaNeue无微软雅黑字体android 系统默认中文字体是Droidsansfallbac...
  • 首先默认打包web正式版本的命令是:flutter build web --release 其中隐藏了一个一个参数,如下: --web-renderer可选参数值为auto、html或canvaskit。 auto(默认)- 自动选择渲染器。移动端浏览器选择 HTML,...
  • phpweb因为神奇的中文有时也是会遇到国外同学都不知道原因导致一些神奇滴问题,所以要用更神奇的英文来解决问题。Mac OS的一些:华文细黑:STHeiti Light [STXihei]华文黑体:STHeiti华文楷体:STKaiti华文宋体:...
  • 适合阅读的中文字体

    2021-05-14 21:53:47
    我时常更新自己的博客程序,也时常更新自己...不像英文,使用 Web Fonts 的代价相当低廉,中文因为文字量大的原因,整个字体文件偏大,暂不适合使用 Web Fonts。在这样的情形下,我们只能尽量利用作业系统自身的字体...
  • 在这篇教程中,我们将看看如何使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体。然后在看看如何使用生成的字体通过css应用到Web页面中。 使用字体图标的优势 字体图标除了图像清晰度之外,比位图还有哪些...
  • font-spider 前端开发字体的好工具HTML5学堂:font-spider是业界首款中文 WebFont 本地自动化压缩与转码工具。利用它不但能帮你轻松解决字体文件的兼容问题,并能自动检索找出指定的文字重新压缩使字体文件大大减小...
  • 1、下载一个中文字体库,如:simkai.ttf 2、将字体库放入文件夹” /usr/share/zabbix/assets/fonts/ “下面:mv simkai.ttf /usr/share/zabbix/assets/fonts/ 3、修改配置文件(以下两个地方将graphfont改成...
  • 拷贝一个中文字体文件例如 simfang.ttf 复制到 tcpdf的 fonts\utils 下,切换到dos窗口,修改目录到这个utils目录下,执行如下命令: > ttf2ufm -a -F simfang.ttf> ...
  • 你是不是也遇到过这个问题:在HTML或CSS中怎么设置字体为宋体或楷体或黑体等等中文字体呢?下面就来解决这个问题。用font-family:字体英文名 即可。fon标记是HTML里最常用的文字格式控制标记,通过改变font标记的...
  • 原创:张荣国我们在做网站时,都知道需要...苹果ios 系统:默认中文字体是Heiti SC默认英文字体是Helvetica默认数字字体是HelveticaNeue无微软字体android 系统默认中文字体是Droidsansfallback默认英文和数字字体是...
  •  linux提供的web服务,能在网页展示中文,下载pdf出现中文无法读取!,甚是迷瞪,经分析展示是本地浏览器的解析,下载pdf是服务器端的响应,因此要在服务端安装对应的字体库就可以解决此问题! 问题解决:#  ...
  • 关于@font-face@font-face 是 CSS3 中的一个模块,使用 @font-face 可以自定义网页字体,即使用户的电脑没有安装某种字体。怎么用 @font-face 呢?你可能见过类似下面的代码片段,它可以让 @font-face 兼容所有...
  • 浏览器中展示网页文字内容时,文字字体都会按照设计师在css中定义的字体族的顺序来进行显示。什么是字体族?字体族就是你在css代码中看到“font-family”的代码内的一类字体名称,例如下面这行代码:font-family:...
  • html+css字体如何居中?

    千次阅读 2020-12-20 10:17:14
    1、字体水平居中在CSS中,可以使用text-align属性来让文字水平居中。text-align属性规定元素中的文本的水平对齐方式,设置值为center则可实现文本文字水平居中对齐。text-align属性通过指定行框与哪个点对齐,从而...
  • www.theleagueofmoveabletype.comwww.exljbris.comwww.fontex.orghttp://openfontlibrary.orgwww.fontsquirrel.comwww.google.com/webfonts2、字体有多...
  • 问题描述:1、数据库原有的汉字数据正常显示2、在本地添加数据没问题,在服务器上面新添加中文汉字数据显示为???问题解决过程:1、首先断定是编码问题,通常默认的编码是UTF-8。2、本地没问题,线上的tomcat用的...
  • 一、Flutter 自定义字体、 1、ttf 字体文件、 2、ttf 字体资源配置、 3、获取字体、 4、全局使用字体、 5、局部使用字体、 二、完整代码示例、 三、相关资源、
  • 众所周知,JSPDF是一个开源的,易用的,但是对中文支持非常差的PDF库。下面,我教大家,如何在pdf中使用思源黑体。思源黑体是开源字体。思源黑体具有很广泛使用性,实用性,也是规避字体版权风险的重要选择!请严格...
  • 字体标签: 、 、 、、超链接 字体标签特殊字符(转义字符):空格 (non-breaking spacing,不断打空格):大于号(greater than)&:符号&":双引号':单引号©:版权©™:商标™绐:文字绐。其实,#32464是...
  • 由于中文字体字符集的限制,最终字体包文件都会很大,这里不做讨论。下面主要介绍英文、数字符号场景下几种常见的字体格式。 .ttf TrueType,是Type 1(Adobe公司开发)的竞品,由苹果公司和微软一起开发,是mac系统...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,496
精华内容 20,198
关键字:

web中文字体