html字体 | 易学教程

移动端自适应布局----rem字体

阅读更多关于移动端自适应布局----rem字体

一.px,em,rem之间联系与区别 px：像素是相对于显示器屏幕分辨率而言的相对长度单位，不会受屏幕宽度改变 em：继承父级的font-size，与父级的字体大小有关 rem：是em的升级版，rem只会相对html的值，不会受到父级的影响。二.移动端怎么用rem 假设设计师的视觉稿是按照iPhone6的宽度来设计的，即375px 那么，我们可以完全按照视觉稿上的尺寸来赋值给元素的样式，比如视觉稿上的尺寸是80px，那么在css中就可以直接定义width:80px; 页面中所有的尺寸都这样来设置。当所有的网站所有的页面样式都设置好之后。 1. 设置页面的rem大小 ```css html { font-size: calc(100vw/3.75); } 或者（ipone6举例） html{ font-size:26.67vw; } ``` 100vw是设备的宽度，除以3.75可以让1rem的大小在iPhone6下等于100px 2. 替换页面中的单位，把所有的px单位替换成rem，除以100，比如前面的80px，就是0.8rem 这样在iPhone6下，所有元素的尺寸还是和视觉稿的尺寸一样，而iphone5中，因为设备的宽度变小了，100vw/3.75得到的值，会相应的变小，即rem的单位值会变小，页面中所有的尺寸会等比例缩放。这样就可以做到针对任何分辨率的设备保持视觉一致了

谷歌浏览器移动端部分字体大小与设定大小不同

阅读更多关于谷歌浏览器移动端部分字体大小与设定大小不同

问题描述：为了适配各种移动端设备，动态设置了viewport缩放，然后动态设置html的font-size大小，用rem布局。但是在谷歌浏览器中查看的时候出现了问题 1.这个没问题，font-size设置的.28rem，所以换算成px应该是.28*100=28px；OK，没毛病，但是下面那行字就很大了。。 2.同样是设置.26rem字体大小，按理说应该是26px，但是浏览器里显示的是37px？？？这是什么鬼，火狐浏览器一切正常。于是百度原因，就在于webkit的 Font Boosting 。解决方法：参考：解决移动端字体大小与设定大小不同的问题 Computed font size is bigger than defined in CSS on the Asus Nexus 7 来源： CSDN 作者： jojo付啾啾链接： https://blog.csdn.net/DreamFJ/article/details/83506083

前端适配

阅读更多关于前端适配

移动端开发中，关于适配问题的一点总结(一) 转自：http://www.jianshu.com/p/3a5063028706?nomobile=yes 我们第一次接触移动web的时候，直观印象样应该是：屏幕比pc小很多，所以对pc端设计的界面，不一定（或者说不完全）能很好的适用到移动端。下面这段代码，做过移动端项目的同学一定不会陌生。假设你已经见过上面的代码，并有所应用，对响应式设计如何工作有大概的了解，但不一定清楚一些细节。最近在做一个移动端的项目，要求做到精确还原设计稿，像素级。现在我把自己的一些心得分享出来，给大家参考。下面我就关于像素，视口，分辨率，meta视口相关的内容展开叙述。要实现像素级还原，首先我们要搞清楚什么是像素。 #像素像素(pixel) 是网页布局的基础，web开发者，包括设计师，凭直觉去使用它。我们好像对它很熟悉，但依然还有很多关于这个基础构建模块的东西需要我们去学习。例如，一个像素到底是什么。乍一看，这似乎是个非常简单的问题，一个像素就是计算机能够显示一种特定颜色的最小区域。屏幕上像素越多，你就看到的越多。或者说，同样尺寸的设备，像素越多，效果就越细腻。对于开发者来说，给一个元素设置 width : 200px ;会发生什么事情呢？ //废话 lol ，就是给它设置宽度200px 呗，stupid question..

移动端 H5 --页面适配（二）

阅读更多关于移动端 H5 --页面适配（二）

一、基础概念在了解如何做H5页面适配前，大家都应该把移动端涉及的一些概念搞明白，比如：dpr 是什么意思？移动端H5解惑-概念术语（一）二、为什么要做页面适配 2.1 PC端为什么要解决浏览器兼容因为在PC端，由于浏览器种类太多啦，比如几个常用的：IE、火狐、Chrome、Safari等。同时，由于历史原因，不同浏览器在不同时期针对当时的WEB标准有一些不一样的处理（虽然大部分一样），比如：IE6、IE8、IE10+等对于一些JS事件处理、CSS样式渲染有所不同。而恰恰又有一些人在使用着不同类型的浏览器，以及不同浏览器的不同版本。所以，为了能让你的网站让这些不同的人看到效果一致，你就不得不做兼容，除非这些人不是你的目标用户。 2.2 移动端为什么要做适配在移动端虽然整体来说大部分浏览器内核都是webkit，而且大部分都支持CSS3的所有语法。但是，由于手机屏幕尺寸不一样，分辨率不一样，或者你需要考虑横竖屏的问题，这时候你也就不得不解决在不同手机上，不同情况下的展示效果了。另外一点，UI一般输出的视觉稿只有一份，比如淘宝就会输出：750px 宽度的（高度是动态的一般不考虑）（详情），这时候开发人员就不得不针对这一份设计稿，让其在不同屏幕宽度下显示一致。一致是什么意思？就是下面提到的几个主要解决的问题。三、页面适配主要解决的问题元素自适应问题文字rem问题

CSS引入外部字体方法，附可用demo

阅读更多关于 CSS引入外部字体方法，附可用demo

有时候我们做的页面需要用到一些更好看的字体又不想用图片代替，图片会影响加载速度则使用外部字体来显示但是直接通过font-family又不一定全部都行这就需要我们在css中进行定义并且引入字体文件路径然后再使用外部字体直接上代码： font.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS引用外部字体</title> <link rel="stylesheet" type="text/css" href="font.css"> </head> <body> <h1>里客云资源站</h1> <h2>www.likeyunba.com</h2> </body> </html> font.css @font-face { font-family: 'fontnameRegular'; src: url('fontname.eot'); src: local('fontname Regular'), local('fontname'), url('fontname.woff') format('woff'), url('fontname.ttf') format('truetype'), url('fontname.svg#fontname') format('svg'); } /

icon图标深入指南

阅读更多关于 icon图标深入指南

图标是网络上常用的元素。它们是通用的，可以立即识别，可以非常吸引人，引起注意，并且（如果使用正确）可以提供出色的用户体验。在网络上实现图标时，我们有很多选择： Icon Spritesheet – 图标精灵(雪碧图) Icon font – 图标字体 Inlined SVG – 内联SVG SVG as an image element – SVG作为图像元素它们中的一些如今已很常见，例如SVG元素(SVG elements)和Icon字体。在本文中，我们将深入研究在Web上实现Icon的每种方法，并看看哪种方法在性能、可访问性、样式选项和浏览器支持方面是最佳的。一、Icon Spritesheet（图标精灵）我们通过将较小的图像（icon）文件合并为一个较大的文件来创建Icon Spritesheet。我们需要使用CSS background-image ， background-size 和 background-position 来显示Spritesheet中的图像。雪碧图示例我们可以使用 SVG Spritesheet 结合 PNG Spritesheet 来确保图标在各种显示（常规和视网膜）上看起来都不错，以作为旧版浏览器的后备。我们可以使用像 Modernizr （https://modernizr.com/）这样的 JavaScript

前端基础-css(3)

阅读更多关于前端基础-css(3)

一、文本属性和字体属性（常用） 1、文本属性　　- /*对齐方式*/ 　　　　text-align:left|right|center|justify（两端对齐，只适用于英文）; 　　- /*文本颜色*/ 　　　　color:色值; 　　- /*首行缩进，建议单位用em*/ 　　　　text-indent:2em; 　　- /*文本修饰*/ 　　　　text-decoration:none|underline|overline|line-through|inherit; 　　- /*行高*/ 　　　　line-height:高度值; 2、字体属性　　- /*字体大小（最小12px）*/ 　　　　font-size:数值|inherit；　　- /*字体粗细*/ 　　　　font-weight:normal|bold|border|lighter|100~900|inherit; （100~300没区别）　　- /*字体系列*/ 　　　　font-family: "Microsoft Yahei", "微软雅黑", "Arial"；行高的使用　　(1) 针对单行文本垂直居中　　　　公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。　　(2) 针对多行文本垂直居中　　　　　　行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。　　　

护工列表页

阅读更多关于护工列表页

护工列表页 CSS Sprite雪碧图什么是雪碧图 CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分使用场景静态图片，不随用户信息的变化而变化。小图片，容量比较小（2~3k）。图片加载量比较大。使用目的减少Http请求数量，加速内容显示。因为每请求一次，就会和服务器建立一次链接，而建立链接是需要额外的时间的。优点加快网页加载速度网页上面每一张图片，都要向浏览器请求下载图片，而浏览器接受的同时请求数是10个，一次能处理的请求数目是两个。后期维护简单该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪碧图，更换图片的时候也只要更改一下图片的位置就可以了。直接生成代码，简单易用。 CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。缺点在图片合并的时候，你要把多张图片有序的合理的合并成一张图片

字体图标iconfont

阅读更多关于字体图标iconfont

　字体图标的作用： 1. 可以做出图片一样可以做的事情，改变透明度，旋转度，等... 2. 但是本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果等 3. 本身体积更小，但携带的信息并没有消减 4. 几乎支持所有的浏览器 5. 移动端设备必备良药字体图标使用流程： 1. UI人员设计好字体图标效果图（svg）使用软件 illustrator 或sketch 2. 前端人员上传生成兼容性字体文件包 https://icomoon.io/ iconfont.cn 3. 前端人员下载兼容字体文件包到本地 4. 把字体文件包引入到HTML页面中应用：第一步.在css里面声明字体 @font-face { /* 电脑中没有的字体，我们需要声明 */ font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2

egret：添加外部字体

阅读更多关于 egret：添加外部字体

将外部字体放在与index.html同目录下；打开index.html文件；在style中引入外部字体：　　@font-face { font-family: 'MyText'; src:url('./font/MyText.ttf') ; } 在script里监听字体是否加载完成： document.fonts.ready.then(success, fail); function success(){ egret.runEgret({renderMode:"webgl", audioType:0}); } function fail(){ } 直接引用：label.fontFamily = "MyText" 来源： https://www.cnblogs.com/WentingC/p/11934503.html

订阅 html字体