公司要求不再浏览器中添加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. HTML--CSS样式表的基本概念

    CSS(Cascading Style Sheet  叠层样式表) 作用:美化HTML网页 (一)样式表分类 一.内联样式表 和HTML联合显示,控制精准,但是可重用性差,冗余多. 例如:<p ...

  2. IDEA创建普通java和web项目教程

    1.第一个javaSE项目 01.双击idea运行IDE 02.配置JDK 03.创建项目的workspace .iml文件里面是当前项目的一些配置信息! 相当于web项目中的web.xml文件 04 ...

  3. spring与mybatis整合(扫描Mapper接口)

    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean" ...

  4. Java编程基础阶段笔记 day06 二维数组

    二维数组 笔记Notes 二维数组 二维数组声明 二维数组静态初始化与二位初始化 二维数组元素赋值与获取 二维数组遍历 二维数组内存解析 打印杨辉三角 Arrays工具类 数组中常见的异常 二维数组 ...

  5. UE4 代理 BindRaw和BindUObject

    代理允许您在C++对象上以通用的但类型安全的方式调用成员函数.通过使用代理,可以将其动态地绑定到任何对象的成员函数上,然后在该对象上调用函数,即时调用者不知道该对象的类型也没关系. 任何时候都应该通过 ...

  6. 新IT运维时代 | Docker运维之最佳实践-上篇

    容器技术的发展可以分为两个阶段,第一个阶段聚焦在IaaS层,仅仅把容器当做更轻量级虚拟机来使用,解决了应用运行时进程级资源隔离的问题:随着Docker的出现,容器虚拟化才有了统一的平台,由此容器技术发 ...

  7. dubbo是如何控制并发数和限流的?

    ExecuteLimitFilter ExecuteLimitFilter ,在服务提供者,通过 的 "executes" 统一配置项开启: 表示每服务的每方法最大可并行执行请求数 ...

  8. 10分钟了解一致性hash算法

    应用场景 当我们的数据表超过500万条或更多时,我们就会考虑到采用分库分表:当我们的系统使用了一台缓存服务器还是不能满足的时候,我们会使用多台缓存服务器,那我们如何去访问背后的库表或缓存服务器呢,我们 ...

  9. 夯实Java基础(四)——面向对象之多态

    1.多态介绍 面向对象三大特征:封装.继承.多态.多态是Java面向对象最核心,最难以理解的内容.从一定角度来看,封装和继承几乎都是为多态而准备的. 多态就是指程序中定义的引用变量所指向的具体类型和通 ...

  10. (14)ASP.NET Core 中的日志记录

    1.前言 ASP.NET Core支持适用于各种内置和第三方日志记录提供应用程序的日志记录API.本文介绍了如何将日志记录API与内置提供应用程序一起使用. 2.添加日志提供程序 日志记录提供应用程序 ...