HTML页面仿WORD样式
公司要求不再浏览器中添加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样式的更多相关文章
- WPF仿Word头部格式,涉及DEV RibbonControl,NarvbarControl,ContentPresenter,Navigation
时隔1个月,2015/06/17走进新的环境. 最近一个星期在学习仿Word菜单栏的WPF实现方式,废话不多说,先看一下效果. 打开界面后,默认选中[市场A],A对应的菜单栏,如上图, 选择[市场B] ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- 【MVC】 非常简单的页面导出 WORD, EXCEL方法
[MVC] 页面导出 WORD, EXCEL 前端 js function output() { var para = new Object(); para.html = getHtml(" ...
- 动态为页面添加CSS样式文件引用
动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Def ...
- 一款基于的jQuery仿苹果样式焦点图插件
这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...
- 今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐。最后找到问题所在doctype
今天被 <!doctype html> 搞了两个小时,两个页面同样的样式,chosen右边的小箭头,一个上下居中对齐 一个居顶对齐.最后找到问题所在doctype <-- 这个小箭头
- vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改
vue中滚动页面,改变样式&&导航栏滚动时,样式透明度修改.vue <div class="commonHeader" v-bind:class=" ...
- 【CSS】如何在一个页面中引入样式css
CSS(Cascading Style Sheet)又叫层叠样式表.是我们学习前端必不可少的一门语言,学习它其实就是为了学会如何去更改页面标签的样式.目前使用最广的是css3,但同样的,他是从css2 ...
- HTML页面仿iphone数字角标
做仿iphone样式的数字角标,用简单的css来实现 <html><head><title>角标数字</title><style type=&qu ...
随机推荐
- C#2.0新增功能07 getter/setter 单独可访问性
连载目录 [已更新最新开发文章,点击查看详细] 属性是一种成员,它提供灵活的机制来读取.写入或计算私有字段的值. 属性可用作公共数据成员,但它们实际上是称为访问器的特殊方法. 这使得可以轻松访问 ...
- Android解决RecyclerView中的item显示不全方案
最近的项目中实现订单确定页面.需要使用ScrollView嵌套RecyclerView,当RecyclerView中的item数量比较多时,就会出现item只显示一部分数据,并没有将用户勾选的商品数量 ...
- jQuery入门二(DOM对象与jQuery对象互相转换)
- DOM对象与jQuery对象互相转换 第一篇说过,DOM对象不能调用jQuery对象的属性和方法,同样jQuery对象也不能调用DOM对象的属性和方法.但是在实际开发中,可能两者间需要互相调用对方 ...
- java并发笔记之证明 synchronized锁 是否真实存在
警告⚠️:本文耗时很长,先做好心理准备 证明:偏向锁.轻量级锁.重量级锁真实存在 由[java并发笔记之java线程模型]链接: https://www.cnblogs.com/yuhangwang/ ...
- spring+mybatis最简多数据源配置
作者:纯洁的微笑出处:http://www.ityouknow.com/ 版权所有,欢迎保留原文链接进行转载:) 说起多数据源,一般都来解决那些问题呢,主从模式或者业务比较复杂需要连接不同的分库来支持 ...
- Linux中bash shell环境变量
别名 别名是命令的快捷方式.为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用.语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令.重要的 ...
- 关于STM32F103+ESP8266+阿里云过程之设备状态更新至阿里云(三)
设备与阿里云完成发布订阅的功能,接下来就是将设备状态如温湿度,PM2.5值上报更新至阿里云. 1.查看Topic. 在阿里云平台上 设备->Topic列表中查看.在产品中也可以看到对应的Topi ...
- Mac相关快捷键操作
拷贝: shift + option + 拖动拖动至目的地 创建快捷方式: option + command + 拖动至目的地
- hdoj 4712 Hamming Distance(靠人品过的)
我先解释一下汉明距离 以下来自百度百科 在信息论中,两个等长字符串之间的汉明距离是两个字符串对应位置的字符不同的个数.换句话说,它就是将 一个字符串变换成另外一个字符串所需要替换的字符个数. 例如: ...
- Python实现批量处理扫描特定目录
## 简述在渗透测试中遇到相同CMS站点时,搞定一个站点,相当于拿了一个站群的通用漏洞,所以我们首先需要标注站点的CMS类型,根据要求编写如下脚本 ## 要求1.访问特定目录,如:站点特定 /cmsa ...