公司要求不再浏览器中添加office插件的前提下。展示WORD文档中的内容要求一一对应。经过查询资料以及调整,得出如下相关资料:

1  标题样式:

目录 -- 宋体 小二 加粗

一级标题 -- 微软雅黑 四号 加粗 <div style="font-family:微软雅黑;font-size:19px;font-weight: bold;">1  XXX</div>

二级标题 -- 微软雅黑 小四 加粗 <div style="font-family:微软雅黑;font-size:16px;font-weight: bold;">1.1  XXX</div>

三级标题 -- 微软雅黑 小四 加粗 <div style="font-family:微软雅黑;font-size:16px;font-weight: bold;">1.1.1  XXX</div>

表格标题 -- 宋体 五号 加粗  <div style="text-align:center;font-family:宋体;font-size:14px;font-weight: bold;"> </div>

正文文本 -- 宋体 小四 <div style="text-indent:25px;line-height:35px;height:auto;font-family:宋体;font-size:16px;"></div>

2  style  部分标签:

加粗:font-weight: bold;
斜体:font-style: italic;
font-style:设定字体样式。normal 默认/italic,oblique斜体;
font-weight:设定字体粗细。normal 默认/bold 粗体/bolder 比bold更粗/lighter 比较细的字体
font-size:设定字体大小。字体大小 可以用px表示 默认字体大小为 12px
font-family:设定字体/“微软雅黑”/“宋体”/“黑体”

3  字号、pt、px、em换算对照表:

初号 42pt 56px 3.5em

小初 36pt 48px 3em

34pt 45px 2.75em

32pt 42px 2.55em

30pt 40px 2.45em

29pt 38px 2.35em

28pt 37px 2.3em

27pt 36px 2.25em

一号 26pt 35px 2.2em

25pt 34px 2.125em

小一 24pt 32px 2em

二号 22pt 29px 1.8em

20pt 26px 1.6em

小二 18pt 24px 1.5em

17pt 23px 1.45em

三号 16pt 22px 1.4em

小三 15pt 21px 1.3em

14.5pt 20px 1.25em

四号 14pt 19px 1.2em

13.5pt 18px 1.125em

13pt 17px 1.05em

小四 12pt 16px 1em

11pt 15px 0.95em

五号 10.5pt 14px 0.875em

10pt 13px 0.8em

小五 9pt 12px 0.75em

8pt 11px 0.7em

六号 7.5pt 10px 0.625em

7pt 9px 0.55em

小六 6.5pt 8px 0.5em

七号 5.5pt 7px 0.4375em

八号 5pt 6px 0.375em

(部分内容摘抄自他人撰写内容,如有意见请联系作者更改)

HTML页面仿WORD样式的更多相关文章

  1. WPF仿Word头部格式,涉及DEV RibbonControl,NarvbarControl,ContentPresenter,Navigation

    时隔1个月,2015/06/17走进新的环境. 最近一个星期在学习仿Word菜单栏的WPF实现方式,废话不多说,先看一下效果. 打开界面后,默认选中[市场A],A对应的菜单栏,如上图, 选择[市场B] ...

  2. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

  3. 【MVC】 非常简单的页面导出 WORD, EXCEL方法

    [MVC] 页面导出 WORD, EXCEL 前端 js function output() { var para = new Object(); para.html = getHtml(" ...

  4. 动态为页面添加CSS样式文件引用

    动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...

  5. 一款基于的jQuery仿苹果样式焦点图插件

    这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...

  6. 今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐。最后找到问题所在doctype

    今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐.最后找到问题所在doctype <-- 这个小箭头

  7. vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改

    vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...

  8. 【CSS】如何在一个页面中引入样式css

    CSS(Cascading Style Sheet)又叫层叠样式表.是我们学习前端必不可少的一门语言,学习它其实就是为了学会如何去更改页面标签的样式.目前使用最广的是css3,但同样的,他是从css2 ...

  9. HTML页面仿iphone数字角标

    做仿iphone样式的数字角标,用简单的css来实现 <html><head><title>角标数字</title><style type=&qu ...

随机推荐

  1. c语言进阶7-结构体

    一.  结构体: 在程序设计基础当中我们学习了变量,变量可以节省使用空间相对于常量而言,大家来看下表: 学号 姓名 职位 性别 数学 英语 语文 总成绩 1 刘琳 班委 女 50 61 56 167 ...

  2. jmeter使用问题——将接口返回变量存储成csv文件

    在使用jmeter做接口测试时,一整个jmx测试计划中,存在多个线程,多个接口的测试 但是接口可以分类,比如业务接口.查询接口.更新接口等 考虑自动化接口测试一般都是一次性的,有完整的闭环链路,一般步 ...

  3. 2019杭电多校第二场hdu6601 Keen On Everything But Triangle

    Keen On Everything But Triangle 题目传送门 解题思路 利用主席树求区间第k小,先求区间内最大的值,再求第二大,第三大--直到找到连续的三个数可以构成一个三角形.因为对于 ...

  4. linux初学者-常用基本命令篇

    linux系统中有着许许多多的命令,并且软件也有可能自带命令,要想全部了解这些命令是很困难的,但是有一些基本命令是在平时的学习工作中应用的很广泛的.以下简要介绍几种linux系统中的常用命令. 1.m ...

  5. java的System.currentTimeMillis()和System.nanoTime

    纳秒 ns(nanosecond):纳秒, 时间单位.一秒的10亿分之一,即等于10的负9次方秒.常用作 内存读写速度的单位,其前面数字越小则表示速度越快.   1纳秒=1000 皮秒   1纳秒 = ...

  6. .NET Core on K8S学习实践系列文章索引(Draft版)

    一.关于这个系列 自从去年(2018年)底离开工作了3年的M公司加入X公司之后,开始了ASP.NET Core的实践,包括微服务架构与容器化等等.我们的实践是渐进的,当我们的微服务数量到了一定值时,发 ...

  7. [重磅开源] 比SingleR更适合的websocket 即时通讯组件---ImCore开源了

    有感而发 为什么说 SignalR 不合适做 IM? IM 的特点必定是长连接,轮训的功能用不上. 因为它是双工通讯的设计,用hub.invoke发送命令给服务端处理业务,其他就和 ajax 差不多, ...

  8. rocksdb编译步骤——Java、Golang、mac

    如果不是必要不建议自己编译rocksdb,编译的过程比较耗时费力.现在已经有很多编译好的文件可供使用. Java <!-- https://mvnrepository.com/artifact/ ...

  9. 自己动手,开发轻量级,高性能http服务器。

    前言 http协议是互联网上使用最广泛的通讯协议了.web通讯也是基于http协议:对应c#开发者来说,asp.net core是最新的开发web应用平台.由于最近要开发一套人脸识别系统,对通讯效率的 ...

  10. Extjs的使用总结笔记

    一:Extjs自带验证 1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等) 2.alphanum//只能输入字母和数字,无法输入其他 3.email//email验证,要求的格式是& ...