html字体

html 页面布局

由 ≯℡__Kan透↙ 提交于 2020-01-28 19:18:30
块元素：具备合模型的属性，独占一行可以设置宽高和内外边距 行元素：不具备合模型，只占内容区域的大小，不可以设置内外边距和宽高， display：inline-block；会产生间隔，下面介绍消除间隔的方法 方法1.删除标签之间的空格和换行 问题 代码可读性差，不推荐使用 方法2：将父元素字体设置为0px，子元素设置为16px； 问题：通过继承性也会影响自身子元素字体的大小，同时可能导致布局混乱em之类参考父元素的值无法使用。 方法3：给父级设置-6px和自身0px 问题：较小，但是需要给每一个元素设置，比较繁琐 方法4.删除闭合标签。此方法不推荐。 来源： CSDN 作者： Jason–json 链接： https://blog.csdn.net/weixin_46146313/article/details/104100965

CSS中强大的EM

由 孤者浪人 提交于 2020-01-25 20:02:47
使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。 这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用“em”对层进行弹性扩展？又是如何扩展文本和图像等内容？下在我们就一起带着这些问题开始今天的“em”之行。 什么是弹性布局？ 用户的文字大小与弹性布局 用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。当然，如果用户愿意他可以改变这种字体大小的设置，用户可以通过 UI控件 来改变浏览器默认的字体大小。 弹性设计有一个关键地方 Web页面中所有元素都使用“em”单位值 。“em”是一个 相对 的大小，我们可以这样来设置 1em，0.5em，1.5em 等，而且“em”还可以指定到小数点后三位，比如“1.365em”。而其中“相对”的意思是： 相对的计算必然会一个参考物，那么这里相对所指的是相对于元素父元素的 font-size 。比如说：如果在一个<div> 设置字体大小 为“16px”，此时这个<div

网页字体适配方案

由 回眸只為那壹抹淺笑 提交于 2020-01-21 05:42:45
微信安卓版 7.0.10 版本起，网页的字体大小会跟随微信全局设置里的字体大小。若用户设置了较大字体后，可能导致网页的排版出现错乱，建议开发者做好较大字体的适配 document.addEventListener("WeixinJSBridgeReady", function () { WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: '2' }); }, false); 此外，若页面是用 rem 单位进行排版的（目前该做法更容易导致页面不可用），可以反向重置 font-size 的数值达到还原字体标准大小的目的。代码示例如下： // 以下代码思路来源网络。同时尽量将代码放在 body 标签开头位置 var $dom = document.createElement('div'); $dom.style = 'font-size: 10px;'; document.body.appendChild($dom; // 计算出放大后的字体 var scaledFontSize = parseInt(windowgetComputedStyle($dom, null.getPropertyValue('fontsize')); document.body.removeChild($dom; // 计算原字体和放大后字体的比例

w3c搬运CSS念念碎

由 冷暖自知 提交于 2020-01-18 01:51:10
w3c搬运CSS念念碎 基本使用 当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。 如果值为若干单词，则要给值加引号 p { font-family: "sans serif"; } 是否包含空格不会影响 CSS 在浏览器的工作效果,不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。 选择器 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 { color: green; } body { font-family: Verdana, sans-serif; } 通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。 id选择器：#id名 在现代布局中，id

web前端入门到实战：CSS的文本格式化样式总汇

由 两盒软妹~` 提交于 2020-01-17 21:39:26
长度单位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: red; } .box1{ font-size: 20px; /*em数值根据当前元素字体大小变化而变化*/ width: 2em; /*百分比随着父元素变化而变化*/ height: 50%; background-color: yellow; } </style> </head> <body> <div class="box"> <div class="box1"></div> </div> </body> </html> 专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划） 颜色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px

web icon小图标字体

由 陌路散爱 提交于 2020-01-16 14:58:13
　　相信大家在很多网站都已经看到icon小图标被大量使用，那么icon小图标是怎么做成的呢，下面就稍微描述一下， 多余的话就不说了，直奔主题吧。 　　icon小图标现在基本上有三种方式： 一、css sprite 也叫css雪碧或者css精灵，这种方法主要是用背景定位和背景图片，网上太多关于css sprite的文章，我就不细说了。 二、icon font+html 这种方法新浪博客和淘宝网易都有使用 看下面两张图的对比，这是新浪微博的主页，第一张图首页图标是一个房子，第二张图我注释掉font-family属性之后首页图标变成了html文件中的字母 E，这个就使用到了web字体图标。 那么怎么制作web字体图标呢，首先向大家推荐一个网站： https://icomoon.io 我们可以使用这个网站很轻松的就能制作出字体图标，使用方法 http://isux.tencent.com/icon-font.html 这个网站已经说的很清楚了，大家可以参考。 主要就是导入svg格式的图片，选中，然后download下来就可以了，download下来之后会生成一个压缩包，解压之后大家可以看见一个demo.html文件，用浏览器打开就能看见你的字体图标。 然后在你的项目中使用时只需要新建一个标签对然后copy demo里的十六进制代码到你的标签对里面，并且在前面加上&#x eg: <span>

CSS样式

由 允我心安 提交于 2020-01-16 09:41:48
一、CSS概念 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 二、CSS常用属性 字体 font-size 字体大小 font-famil 选择字体 font-weight 字体粗细 font-style：italic 斜体 color 字体颜色 背景 background-color 设置背景颜色 表格 border 粗细 solid 边框样式 border-radius 边框四角弯曲度 box-shadow 右宽 text-shadow 设置文字阴影 对齐 text-align 文字居中 text-decoartion：underline 下划线 text-decoration：line-through 删除线 text-left 左对齐 text-right 右对齐 line-height 行距 布局 float：left 靠左 float：right 靠右 position：absolute 绝对位置 position：relative 相对位置 position

字体图标的几种引入方式

由 时光怂恿深爱的人放手 提交于 2020-01-16 04:45:51
图片缺点是增加了总文件大小，不能很好地进行“缩放”，因为放大和缩小会失真 字体图标（iconfont） 可做出跟图片一样的事，改变透明度、 旋转度等，但其 本质是文字 ，可以很随意地改变颜色、产生阴影、透明效果等，本身体积更小但携带的信息没有削减，几乎支持所有的浏览器，移动端设备必备 使用流程 ❶ UI人员设计字体图标效果图(svg)，在 illustrator 或 Sketch 这类矢量图形软件中创建 icon 图标之后保存为 svg 格式 ❷ 前端人员上传生成兼容性字体文件包 ❸ 前端人员下载兼容性字体文件包 ❹ 把字体文件包引入HTML页面中 一般是用现成的，常用网站： 阿里icon font字库 、 Font-Awesome 、icomoon字库、fontello等 下载阿里的字体图标后里面会有使用说明，阿里的字体图标有三种引入方式： unicode 、 font-class 和 symbol 方式 unicode方式 unicode 方式应该是最开始接触最熟悉的方式，在 css 中像定义 Web 字体一样，定义将要使用的 iconfont 的名字还有引入地址，再在类样式中使用此字体，设置大小颜色等，最后在元素里添加类并粘贴字体编码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title

[翻译]使用VH和VW实现真正的流体排版

由 狂风中的少年 提交于 2020-01-15 15:45:08
前言 不像响应式布局，通过media query，设置几个变化点来适配，流体排版通过调整大小，适配所有设备宽度。这个方法可以使我们开发的网页，在几乎所有屏幕尺寸上都可以使用。但出于一些原因，它的使用率还远远没有响应式技术高。 在印刷的历史上，排版是根深蒂固的。关于“流体”的概念，在传统思想里并不存在。这是因为，在印刷上，尺寸大小都是有固定的，不用考虑在页面上使用。我认为流体排版技术可以和网页很好的匹配。这是在不同媒介上的一种解决方法。 并不意味着我们要推翻之前的所有关于排版的认识，只需要去学习如何用不同方式，去运用掌握新的技术。只要注意细节，就可以制作出适配所有屏幕尺寸的完美的页面。 流体排版上手 视口（viewport）单位 ，使流体排版在页面上应用变为可能。视口单位是根据浏览器的视口尺寸的百分比来定义的。 举个例子，1视口宽度（vw）等于视口宽度的1%，它不同于百分比的地方是，它的宽度是依赖于视口的宽度的，而百分比是元素的祖先元素来决定的。 视口单位，不同于其它单位，它不依赖于基础字体的大小。这种差别很重要，使它变得有意义而且独特。 可以使用的4种视口单位 ： vw :视口宽度(viewport width) vh :视口高度(viewport height) vmin :视口宽度或高度，选择小的那个 vmax :视口宽度或高度，选择大的那个 使用流体排版最简单的方法
订阅 html字体