公司要求不再浏览器中添加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. [小米OJ] 10. 爬楼梯

    dp 另: 小米oj上的测试样例是错的 ; ) function solution(line) { if (line == 0) return 0; if (line == 1) return 1; ...

  2. [leetcode] 234. Palindrome Linked List (easy)

    原题 回文 水题 function ListNode(val) { this.val = val; this.next = null; } /** * @param {ListNode} head * ...

  3. 基于ng-zorro的ASP.NET ZERO前端实现之代码生成器

    上一篇介绍了集成ng-zorro的过程,本篇我们来看下如何用abp官方的生成器来生成前端代码. Abp官方提供了一个强大的代码生成器 ASP.NET Zero Power Tools,它的Visual ...

  4. 机器学习-特征值,svd分解

    求矩阵的秩 设 ,已知r(A)=2,则参数x,y分别是 解:任意三阶子式=0,有二阶子式≠0,但是这些子式比较多,可以使用初等变换,因为初等变换不改变矩阵的秩,可以将矩阵通过初等行(列)变换,化为行阶 ...

  5. 牛客第三场 J LRU management

    起初看到这道题的时候,草草就放过去了,开了另一道题,结果开题不顺利,总是感觉差一点就可以做出来,以至于一直到最后都没能看这道题qaq 题意:类似于操作系统上讲的LRU算法,有两个操作,0操作代表访问其 ...

  6. containsObject 总是不含有,你会用吗

    结论:containsObject:是在比较内存地址,即使两个对象内容完全一样,地址不同,那也是不同的.我个人认为这个方法应该叫是否存在同一个对象 (开始不知道这个知识,被坑,至少浪费了3个钟头,数组 ...

  7. js页面3秒自动跳转

    如何让当前页面3秒以后自动跳转到其他页面?JS页面自动跳转 想实现登陆后3秒自动跳转到某页的功能,在网上搜了一下,供以后使用 1.<script   language= "javasc ...

  8. 从原理层面掌握HandlerMethod、InvocableHandlerMethod、ServletInvocableHandlerMethod的使用【一起学Spring MVC】

    每篇一句 想当火影的人没有近道可寻,当上火影的人同样无路可退 前言 HandlerMethod它作为Spring MVC的非公开API,可能绝大多数小伙伴都对它比较陌生,但我相信你对它又不是那么的生疏 ...

  9. Mac 10.14.4 编译openjdk1.9源码 及集成clion动态调试

    警告⚠️:本文耗时很长,先做好心理准备:编译openjdk源码需要很大的耐心,因为要踩很多坑,解决很多问题,本人从编译开始到结束用了两天时间,按照本篇教程踩坑会少许:谢谢观看 一.获取openjdk源 ...

  10. CentOS 7.3下使用YUM 安装MySQL5.6

    1.检查Linux系统中是否已安装 MySQL rpm -qa | grep mysql 返回空值的话,就说明没有安装 MySQL 注意:在新版本的CentOS7中,默认的数据库已更新为了Mariad ...