学会用HTML Help Workshop制作chm

学会用HTML Help Workshop制作chm格式的电子书

为一名编程人员，在学习各种编程语言时，会经常翻阅官方的chm帮助手册学习，那么你是否也想制作一个自己的帮助文档呢？下面和我一起做吧！

1.首先制作html文档

如果要用到图片,即将图片和该html文档放到同一个文件夹下,如果要用到css文件,最好也放在同一文件夹下.

2.按以下图步骤操作，工具HTML Help Workshop

软件界面

新建方案

新建方案第二步

输入方案名称

可以新建一个后缀名为hhp的文件，必须和htm文件在同一个目录，名称随意。

如果有，系统会提示已经存在，是否继续使用，点击是。

选择文件类型为html文件

添加需要制作的htm文件

选择点击打开

然后下一步

新建方案完成

点击目录，会弹出一个框

弹框选择确定

会分配一个默认的hhc文件名称，可以修改，然后点击保存

目录新建完之后的界面

插入标题

修改标题的默认图标

然后插入页面，点击否

输入页面的名称，添加页面的相应文件

点击确定

按照以上方法把所有需要添加的文件添加进来，页面名称可以修改

最后点击编译，页面之间的顺序可以用上下左右尖头调整主次

编译完成之后的截图，学会了吧，小伙伴们！

有很多文档资料对于公司或个人来说非常重要，比如整理了好几个月，搜罗整个网络才找到，或者是公司核心资料，如果被他人随意查阅泄漏出去，可能会造成不可估量的损失，利用具有加密功能的软件（明镜防泄密系统）对文件进行加密，在“数据保护策略配置”里，选择要保护的文件类型，然后保存，这样对于要保护的类型的文件即可做到加密保护，不再担忧被泄密了。

.什么是字体图标

可以看作一种特殊字体，其展示的是图标，而不再是文字，其拥有字体的特性，比如大小、颜色、透明效果、阴影等，字体图标加载快、不变形。也可以看作是矢量格式的图标。

2.字体图标常用免费资源

（1）iconmoon字体图标库：https://icomoon.io/app

（2）阿里iconfont字体图标库：https://www.iconfont.cn/

（3）font-awesome字体图标库：

3.字体图标使用步骤

以iconmoon为例

（1）选择需要的图标并下载

1）在fonts文件夹下有四种类型的字体文件，每种字体文件兼容浏览器的种类不同

a）.tff格式（TrueTypeFont），美国苹果公司和微软公司共同开发的，在Windows和Mac操作系统中为默认字体；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等浏览器支持该字体。

b）.woff格式（Web Open Font Format-Web开放字体格式），是一种网页所采用的字体格式标准，使用zlib压缩，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等浏览器支持该字体。

c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微软设计用来在网页使用的字体格式，是OpenType字体的压缩格式，IE专用，IE4+支持该字体。

d）.svg格式（Scalable Vector Graphics-可缩放的矢量图形），它是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等浏览器支持该字体。

其他字体

e）.otf格式（Open Type Font），Microsoft和Adobe公司开发的，.otf格式比.ttf更为强大，可以把PostScript字体嵌入到TrueType中。

2）字体转换

https://www.fontke.com/tool/convfont/

（2）字体图标的引入

1）把字体放到项目的相应位置

将下载解压后的fonts文件夹放到项目路径下

2）在html页面中引入字体

利用CSS的@font-face属性，引入外部字体；

在style.css文件中有如下代码，为固定用法，注意url中字体路径，其它可以不变。

在html的style标签中引入如下代码：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?8l3wc0');
  src:  url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
    url('fonts/icomoon.woff?8l3wc0') format('woff'),
    url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

3）为元素用该字体

span {
        font-family: "icomoon";
    }

4）为元素添加内容

复制demo.html中需要的图标，如下，将其作为元素的内容。

<span>?</span>

（3）新增字体图标的引入

当利用iconmoon选用字体图标时，如果有新增的字体图标需要加入，则需要用到.json文件，如下，在原先选择的基础上，再选择新选择的字体图标，然后再下载使用。

绍

css.gg项目是#Github#的一个开源图标项目，CSS、SVG和Figma用户界面#图标#，可以以css、svg、tsx、fig、xd、json、xml的形式使用，而且图标质量相当之高，值得推荐使用！

Github

https://github.com/astrit/css.gg

特点

css.gg的特点就是轻量、可靠、灵活、优雅

图标分类

警报、箭头、品牌、按钮、代码、内容、设计、设备、文件夹、接口、数学、多媒体、音乐、形状、购物、标志、时间，目前图标总数704个

下面一起来看看

安装使用

以下是在代码中的用法

npm i css.gg

yarn add css.gg

所有图标

<link href='all.css' rel='stylesheet'>

单一图标

<!-- css.gg -->
<link href=' {ICONNAME} .css' rel='stylesheet'>

多个图标

<link href='css?={ICONNAME} | {ICONNAME}' rel='stylesheet'>

<i class=" {ICONNAME} "></i>

<!-- 使用span -->
<span class=" {ICONNAME} "></span>

<!-- 使用div -->
<div class=" {ICONNAME} "></div>

<!-- 使用自定义标签 -->
<gg-icon class=" {ICONNAME} "></gg-icon>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实例</title>

  
    <link href='css' rel='stylesheet'>

</head>
<body>

    <!-- Using i tag  -->
    <i class="gg- {ICONNAME} "></i>

    <!-- Using div tag  -->
    <div class="gg- {ICONNAME} "></div>

    <!-- Using custom tag  -->
    <gg-icon class="gg- {ICONNAME} "></gg-icon>

</body>
</html>

除此之外还可以模块化的用法

@import url('.../css');

React中的用法

import React from 'react'
import { ICONNAME } from 'css.gg'

export default function() {
  return (
    <div>

      <ICONNAME />

    </div>
  )
}

SVG的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实例</title>
</head>
<body>

<!-- 首先要把svg拷贝到项目文件夹 -->
<svg><use xlink:href="path/to/all.svg# {ICONNAME} "/></svg>

</body>
</html>

总结

css.gg是一个非常不错的图标库，而且开放源代码，内置700+精美图标，十几大类型，不管是设计师还是#程序员#，用起来都可以得心应手，enjoy it！

在线咨询

上一篇：2019年南非汽车市场数据概况
下一篇：一文读懂全球化系统中的日期时间处理问题

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商