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

1  标题样式:

  1. 目录 -- 宋体 小二 加粗
  2.  
  3. 一级标题 -- 微软雅黑 四号 加粗 <div style="font-family:微软雅黑;font-size:19px;font-weight: bold;">1 XXX</div>
  4.  
  5. 二级标题 -- 微软雅黑 小四 加粗 <div style="font-family:微软雅黑;font-size:16px;font-weight: bold;">1.1 XXX</div>
  6.  
  7. 三级标题 -- 微软雅黑 小四 加粗 <div style="font-family:微软雅黑;font-size:16px;font-weight: bold;">1.1.1 XXX</div>
  8.  
  9. 表格标题 -- 宋体 五号 加粗 <div style="text-align:center;font-family:宋体;font-size:14px;font-weight: bold;"> </div>
  10.  
  11. 正文文本 -- 宋体 小四 <div style="text-indent:25px;line-height:35px;height:auto;font-family:宋体;font-size:16px;"></div>

2  style  部分标签:

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

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

  1. 初号 42pt 56px 3.5em
  2.  
  3. 小初 36pt 48px 3em
  4.  
  5. 34pt 45px 2.75em
  6.  
  7. 32pt 42px 2.55em
  8.  
  9. 30pt 40px 2.45em
  10.  
  11. 29pt 38px 2.35em
  12.  
  13. 28pt 37px 2.3em
  14.  
  15. 27pt 36px 2.25em
  16.  
  17. 一号 26pt 35px 2.2em
  18.  
  19. 25pt 34px 2.125em
  20.  
  21. 小一 24pt 32px 2em
  22.  
  23. 二号 22pt 29px 1.8em
  24.  
  25. 20pt 26px 1.6em
  26.  
  27. 小二 18pt 24px 1.5em
  28.  
  29. 17pt 23px 1.45em
  30.  
  31. 三号 16pt 22px 1.4em
  32.  
  33. 小三 15pt 21px 1.3em
  34.  
  35. 14.5pt 20px 1.25em
  36.  
  37. 四号 14pt 19px 1.2em
  38.  
  39. 13.5pt 18px 1.125em
  40.  
  41. 13pt 17px 1.05em
  42.  
  43. 小四 12pt 16px 1em
  44.  
  45. 11pt 15px 0.95em
  46.  
  47. 五号 10.5pt 14px 0.875em
  48.  
  49. 10pt 13px 0.8em
  50.  
  51. 小五 9pt 12px 0.75em
  52.  
  53. 8pt 11px 0.7em
  54.  
  55. 六号 7.5pt 10px 0.625em
  56.  
  57. 7pt 9px 0.55em
  58.  
  59. 小六 6.5pt 8px 0.5em
  60.  
  61. 七号 5.5pt 7px 0.4375em
  62.  
  63. 八号 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. ehcache的使用 Shiro与Ehcache的结合(附:EhcacheUtils)

    ehcache 缓存的使用 合理的使用缓存会极大的提高程序的运行效率.切记:缓存请勿滥用. 配置ehcache与Shiro shiro初识请查看该文章 https://blog.csdn.net/py ...

  2. Android使用webService(发送xml数据的方式,不使用jar包)

    Android使用webService可以用ksoap2.jar包来使用.但是我觉得代码不好理解,而且记不住. 所以我查询了好多资料,以及自己的理解.可以用代码发送http请求(发送xml数据)来访问 ...

  3. JS系列1---节流,去抖(防抖)应用场景:intput请求优化,页面监听

    在项目开发过程中经常遇到在input的change事件中发起请求,将用户最新输入的字符作为data传给后台,但是如果用户的输入频率过高,或者用户输入的字符还未拼成一个完整的字词,这时候发起请求会浪费网 ...

  4. windows和linux下如何对拍

    对拍是各种计算机考试检查时必备工具,实际上十分强大,只要你的暴力没有写错就没有问题. 对拍的意思:(怎么有点语文课的意思雾) 对:看见'对'就可以知道有两个. 拍:就是把两个程序结果拍在一起,对照(有 ...

  5. 【原创】这一次,Chrome表现和IE11一样令人失望,围观群众有:Edge,Firefox

    前言 俗话说,常在河边走哪能不湿鞋,天天和浏览器打交道,发现浏览器竟然也隐藏BUG也不是新鲜事了.可以看下我之前的文章: [原创]分享IE7一个神奇的BUG(不是封闭标签的问题,的确是IE7的BUG) ...

  6. java - 如何使一个类不能被继承

    使用final关键字: 使用私有构造器: public final class InitTest{ private InitTest(){} }

  7. [转]jQuery不同版本区别

    原文转载自csdn:http://blog.csdn.net/u010167032/article/details/23666145 了解不同版本之间的差异,与助于选择适合自己项目的版本. ⒈4重要新 ...

  8. 【iOS】"OS X"想要进行更改。键入管理员的名称和密码以允许执行此操作("OS X"想使用系统钥匙串)

    今天真机调试的时候遇到了这个问题,如下图: 每次调试都要输入两次用户名和密码,好麻烦的说…… 关键时刻找到了这篇文章:"Mac OS X"想要进行更改.键入管理员的名称和密码以允许 ...

  9. 【Python-Django】Jinja2模板引擎配置教程详解!!!!

    Jinjia2的官方文档:http://jinja.pocoo.org/docs/2.10/ 1. 安装Jinja2扩展包 $ pip install Jinja2 2. 配置Jinja2模板引擎 T ...

  10. 【JDK】JDK源码分析-AbstractQueuedSynchronizer(2)

    概述 前文「JDK源码分析-AbstractQueuedSynchronizer(1)」初步分析了 AQS,其中提到了 Node 节点的「独占模式」和「共享模式」,其实 AQS 也主要是围绕对这两种模 ...