html字体 | 易学教程

适配方案（六）适配的基础知识之页面中那些内容需要适配

阅读更多关于适配方案（六）适配的基础知识之页面中那些内容需要适配

页面中那些内容需要适配一、图片高清适配图片适配的目的是为了在页面中可以高清还原设计图中用到的图片。页面中用到的图片是否清晰和展示页面的硬件设备的dpr以及图片分辨率这两个因素有关，下面会通过三个例子来说明这个问题。 1、示例一例如dpr=2的设备，1个设备无关像素(android中的1dp，ios中的1pt)需要4个设备物理像素点填充。对于尺寸为100 x 120 (px)的图片，如果用 <img> 来展示，图片显示时会产生模糊现象。原因：渲染图片时，宽度是100px，所以横向会占用100个设备无关像素，高度是120px,所以纵向会占用120个设备无关像素，每个设备无关像素又需要2x2个物理像素点来填充，而图片在每个设备无关像素(px)单位上提供的像素点只有1x1个，这时，系统通过一定的算法在这1个像素点上就近取色，取到4个颜色(这4种颜色接近但是有一定区别)之后，当成4个像素点，然后填充到1个设备无关像素点上，这样就导致图片显示时模糊，dpr越大，这种方式显示的图片越模糊。 2、示例二还是dpr=2的设备，但是准备了一个尺寸为200 x 240 (px)的图片，还是用 <img> 来展示，这时显示的图片就比较清晰了。原因：这时图片本身可以在一个设备无关像素单位上提供2x2个物理像素点，设备展示图片时直接拿图片提供的像素点来填充就可以了，不用对像素点进行处理

适配方案（五）适配的基础知识之页面中那些内容需要适配

阅读更多关于适配方案（五）适配的基础知识之页面中那些内容需要适配

前端项目引入萍方字体

阅读更多关于前端项目引入萍方字体

在今天做项目的时候，没有引用过这种字体，百度一下，教程就出来了，这是我看的原文链接 https://blog.csdn.net/weixin_40297452/article/details/97775406 。本来自己不用写的，我想改变自己做了工作以后养成总结的习惯。所以我。。。 1：把萍方字体包放到三方库文件夹下面 2：在CSS文件夹下面建一个font.css，并写入 @font-face{ font-family: 'pingFangSC-Regular'; src: url("../.font-spider/PingFang Regular.ttf"); //这里是字体文件路径 font-weight: normal; font-style: normal; } 3：在HTML页面引入字体css文件 4：就可以使用字体样式了来源： https://www.cnblogs.com/sb8008/p/11919788.html

reset.css文件下载及剖析

阅读更多关于 reset.css文件下载及剖析

@charset "utf-8"; /* http://meyerweb.com/eric/tools/css/reset/ v2.0-modified | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark,

css3控制字体动态变换颜色

阅读更多关于 css3控制字体动态变换颜色

css3控制字体动态变换颜色 <!doctype html> <html> <head> <meta charset="utf-8"> <title>css3文字颜色更改</title> </head> <style> .site__title { color: #f35626; font-family: 微软雅黑; background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: hue 10s infinite linear; } @-webkit-keyframes hue { from { -webkit-filter: hue-rotate(0deg); -moz-filter: hue-rotate(0deg); } to { -webkit-filter: hue-rotate(-360deg); -moz-filter: hue-rotate(-360deg); } } </style> <body> <h1 class="site__title">色彩会变</h1> </body> </html> 来源： https:/

弹性、静态、响应式、自适应布局之间的区别

阅读更多关于弹性、静态、响应式、自适应布局之间的区别

一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法：　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；　　移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。　在移动端开发中采用静态布局的两种方式：(来自：流布局与响应式网页设计有什么区别？) 　（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-web app 变革之rem）　（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。（具体见content"width=640,user

1114 CSS基础

阅读更多关于 1114 CSS基础

目录 CSS入门标签设置长宽 1.字体样式 1.1 字体类型 font-family 1.2 字体大小 font-size 1.3 字体颜色 color 1.4 字体粗细 font-weight 1.5 文本斜体 font-style 2.文本样式 2.1 文本对齐 text-align 2.2 文字装饰 text-decoration 2.3 首行缩进 text-indent 4.背景样式 4.1 背景颜色 background-color 4.2 背景图片 background-image 4.3 背景重复 background-repeat 4.4 背景位置 background-position 4.5 背景固定样式 background-attachment 5.边框属性 5.1 边框样式 border 5.2 边框局部样式 border局部 5.3 圆,圆角边框 border-radius 6.display 显示方式定义使用同行显示 display: inline 异行显示 display: block; 兼并 display: inline-block; 标签特性 7.盒子模型 7.1 margin: 外边距 7.2 border: 边框 7.3 padding: 内边距 7.4 content: 内容区域 8. 浮动布局 float 8.1 三种取值 8

css3字体缩放样式-webkit-text-size-adjust的用法详解

阅读更多关于 css3字体缩放样式-webkit-text-size-adjust的用法详解

写页面的应该都知道Chrome浏览器默认情况下的字体最小为12px，如果你要设置某字体大小为10px的话，你会在Chrome发现还是12px。如果要使此生效的话，就得修改Chrome的默认配置了，一般应用下面的代码就能在全局生效了： html { -webkit-text-size-adjust: none; } 写页面的应该都知道Chrome浏览器默认情况下的字体最小为12px，如果你要设置某字体大小为10px的话，你会在Chrome发现还是12px。如果要使此生效的话，就得修改Chrome的默认配置了，一般应用下面的代码就能在全局生效了： html { -webkit-text-size-adjust: none; } 但是这样设置之后会有一个问题，就是当你放大网页时，一般情况下字体也会随着变大，而设置了以上代码后，字体只会显示你当前设置的字体大小，不会随着网页放大而变大了，这样对有需要放大网页观看的用户造成了不好的用户体验，所以不建议全局应用该属性，而是在需要的情况单独使用就好了。在中文版Chrome里面，网页CSS里所有小于12px的字体设置都无效，最终将显示12px。这样弄的本意可能是好的，因为中文一旦小于12px，就变得不易阅读。但中文版Chrome也会阅读英文网站啊，中文网页里面也会有英文的小字体设置需求啊，尤其是一些文字部份的设计，不小实在不好看

Web前端基础(6):CSS(三)

阅读更多关于 Web前端基础(6):CSS(三)

1. 定位定位有三种：相对定位、绝对定位、固定定位 1.1 相对定位现象和使用： 1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。 2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right。特性：1.不脱标 2.形影分离 3.老家留坑所以说相对定位在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果用途： 1.微调元素位置 2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。 1.2 绝对定位特性：1.脱标 2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。参考点：一、单独一个绝对定位的盒子 1.当我使用top属性描述的时候是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置 2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。二、以父辈盒子作为参考点 1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点。 3.不仅仅是父相子绝，父绝子绝，父固子绝,都是以父辈元素为参考点。注意了：父绝子绝，没有实战意义

字体基础知识与实际运用

阅读更多关于字体基础知识与实际运用

参考带你了解字体的基础知识字体基础知识术语字形和字体现在通常被翻译为「字体」的 Font 在传统印刷界是指特定尺寸、特定字重、字偶间距等信息的一种 Typeface，比如「尺寸 14pt，字重为 Bold 的 Helvetica」就是一个 Font，而这里的 Helvetica 就是它的 Typeface。不过现在 Font 通常不再包括尺寸了，与铸模的时代不同，计算机里的字体尺寸可以很轻易的改变。 Typeface 的另一个称呼是 Font family （字族），这个词实际上比 Typeface 更好理解且不容易混淆，能很明显的表达出 Font 是 Font family 的子集的意思，所以在 HTML & CSS 的标准中使用的是 Font family（字族）。简单来说「Helvetica」是一个 Typeface，而指定具体的字重：「Helvetica Bold」，这就是 Font 了。还有一个概念是 Glyph ，它表示的是字的某种写法或者说字体的「骨骼」，比如字母 \(a\) 和 ɑ 就是 Glyph 不同，涙 – 泪、強 – 强也是 Glyph 的不同。而 Font、Typeface 和 Glyph 在中文里的翻译就乱七八糟了，按照国家标准（GB/T 16964）应该是：英文国标 Font 字型 Typeface 字体 Glyph 字形然而

订阅 html字体