首页 > 其他分享 >中文网页显示定制字体

中文网页显示定制字体

时间:2023-01-04 13:35:03浏览次数:69  
标签:网页 myyh format url woff 字体 定制 font


中文网页显示定制字体一直是个大问题,英文简单,毕竟就几十个字符而已。用@font-face加载字体就好了。例如Bootstrap里

@font-face {
font-family: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}


中文字体现在的解决办法思路是,把网页用到的文字单独做成字体库,然后用以上方法加载。


一种是有专门的厂商提供这类服务,例如,内地的有字库(http://www.youziku.com/)和台湾的justfont(https://www.justfont.com/)

好处是省事,当然,省事是要给钱的。


如果不嫌麻烦,也可以自己做,方法是利用google的sfntly项目里面的sfnttool将需要的字体重新抽取成一个字体库。具体方法如下


1、下载sfntly项目并编译

项目地址

​https://github.com/googlei18n/sfntly/tree/master/java​

编译为可执行的jar

中文网页显示定制字体_中文


将需要的字体拷贝到同一目录,msyh.ttc是系统里拷贝处理的微软雅黑

中文网页显示定制字体_字体_02


运行命令

java -jar sfnttool.jar -s '字体测试' msyh.ttc myyh.ttf


中文网页显示定制字体_字体_03



这样就生成了一个仅包含四个字的字体。


这个时候,可以上各种字体转换网站,将这个字体转换成其他字体,例如:http://www.font2web.com/,不过一般都有文件大小限制。

如果文件太大,可以用snfttool继续转换,

中文网页显示定制字体_字体_04


sfnttool的命令如下,应该是会自动除去重复文字。

Subset [-?|-h|-help] [-b] [-s string] fontfile outfile
Prototype font subsetter
-?,-help print this help information
-s,-string String to subset
-b,-bench Benchmark (run 10000 iterations)
-h,-hints Strip hints
-w,-woff Output WOFF format
-e,-eot Output EOT format
-x,-mtx Enable Microtype Express compression for EOT format


然后,添加css

@font-face {
font-family: 'myyh';
src: url('myyh.eot');
src: url('myyh.woff') format('woff'),
url('myyh.eot?#iefix') format('embedded-opentype'),
url('myyh.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.wnh {
font-family: 'myyh';
}


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
@font-face {
font-family: 'myyh';
src: url('myyh.eot');
src: url('myyh.woff') format('woff'),
url('myyh.eot?#iefix') format('embedded-opentype'),
url('myyh.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.wnh {
font-family: 'myyh';
}
</style>
</head>
<body>
<h1>字体嵌入测试默认</h1>
<h1 class="wnh">字体嵌入测试修改</h1>
</body>
</html>


最后结果如下

中文网页显示定制字体_字体_05


我编译好的snfttool.jar


标签:网页,myyh,format,url,woff,字体,定制,font
From: https://blog.51cto.com/u_15929643/5988318

相关文章

  • 梦想云图Node.JS服务 (网页CAD,在线CAD )
    说明后台提供梦想Node.JS服务,方便调用控件后台功能,Windows服务程序所在目录:Bin\MxDrawServer\Windows,Linux服务程序所在目录:Bin\Linux\MxDrawServer  ......
  • CAD中如何设置自动替换字体?
    CAD字体丢失的问题十分常见,每次都要手动替换非常麻烦,那么,是否可以设置一种默认的替换CAD字体呢?回答是肯定的!本文小编就来给大家分享一下浩辰CAD软件中设置自动替换CAD字体......
  • 动态网页技术-Servlet(1)
    1.Servlet特点按照Servlet规范开发的一个Java程序(类),由服务器调度执行。----只要遵守开发规范编写出来的都叫Servlet,例如:tomcat下的Servlet,weblogic下的Servlet使用时候......
  • 前端网页设计day01
    目录前端HTML5基础内容HTML页面内容块元素和内联元素CSS页面基础内容前端HTML5基础内容HTML页面内容设置网页关键字;<metaname="keywords"content="页面">设置网页......
  • [转载]网页视频改变加速倍数的方法
    (可以直接跳到最下方,有更简单的方法)如果视频是又html5加载出来的而非是flash那么就可用如下方法进行加速:以chrome浏览器,b站视频为例:1.首先右击视频,点击检查。2.找到右边......
  • python pillow保存中文字体居中
    importosimportcv2importnumpyasnpfromPILimportImage,ImageDraw,ImageFonttxtList=["保存单帧","保存多帧"]height=300width=1068#word=wo......
  • vue2 vant的定制主题26
    main.js//导入安装vant组件库importVantfrom'vant';//为了覆盖默认的less变量,需要把css后缀名改为lessimport'vant/lib/index.less';Vue.use(Vant);vue......
  • Hbuiler使用网页播放视频,设置横竖屏
      设置横屏plus.screen.lockOrientation('landscape-primary');  竖屏plus.screen.lockOrientation('portrait') 然后自己根据网页集成的播放器监听是否......
  • 4.CSS网页样式--DIV盒子模型
    实验原理css盒子模型(BoxModel)所有HTML元素可以看作盒子,在CSS中,"boxmodel"这一术语是用来设计和布局时使用。CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:......
  • 博客字体设置方案
    为了提高博客的阅读体验,我对博客的字体设置进行了一系列的调整,此文章旨在记录确定此方案时的思路历程。问题字体设置中遇到的最大问题在于中文内容夹用英文时,某些中文或......