追梦&天空的博客

首先，OTF和TTF都是比较传统的字体格式，OTF在功能上更强大，支持高级排版特性，而TTF则是较早的格式，可能在兼容性上更好。另外，需要解释每个格式的优缺点，比如OTF的OpenType特性，TTF的广泛支持，WOFF的压缩和内置元数据，WOFF2的更高效压缩。需要以清晰的结构解释每个格式，对比它们的优缺点，并给出实际应用的建议，帮助用户优化他们的字体使用策略。还有可能是字体设计的复杂性，比如每个字形的高精度轮廓和曲线数据，尤其是在高分辨率下保持清晰，可能需要更多的点来描述，从而增大文件。

rem是相对于html元素的font-size大小的相对单位，所以在使用rem的时候，只需要设置html元素的font-size大小即可，而且html的font-size是rem的基准。手机屏幕比较小，宽度通常在600px以下，PC端一般在1000px以上，部分高配的笔记本在2000px也有，同样的页面要显示在不同的设备上，还要呈现出满意的效果，不是一件容易的事情。px是你屏幕设备物理上能显示的最小的一个点，这个点不是固定宽度的，不同设备上的长宽比例有可能会不同。...

CSS单行文本以及多行文本显示省略号解决方案文章目录CSS单行文本以及多行文本显示省略号解决方案单行文本溢出显示省略号多行文本溢出显示省略号第一种效果：仅显示3行文本溢出部分显示省略号第二种效果：仅显示3行文本溢出部分显示省略号，并且鼠标上浮显示完整文本内容第三种效果：仅显示3行文本溢出部分显示省略号，并且鼠标点击折叠箭头显示完整文本内容，点击其他位置收起完整文本内容单行文本溢出显示省略号先看一个单行文本溢出后显示省略号的效果，如下图所示如果单行文本设置宽度，并设置其文本不换行样式即可实现这种效果

vue实现简单数字滚动特效今日项目中要求要做一个数字滚动的特效，增加页面的丰富度期望是一个价格数量中的每个数组都可以滚动显示的特效，如下图：下面是一个简单的例子：知识点：CSS动画<template> <div class="scroll-warpper"> <div class="scroll-item" v-for...

动态楼层导航目录动态楼层导航页面布局数据模型滚动事件监听监听窗口滚动楼层导航动态定位设置楼层导航事件驱动方法设置楼层向上滚动设置楼层向下滚动完整代码在vue中使用v-for动态渲染楼层和楼层导航，然后使用原生JavaScript实现楼层导航动态更新与楼层滚动定位１、页面初始化时定位首个楼层２、页面滚动楼层导航自动定位到相应的楼层并高亮显示３、...

关于Less的用法想了解更多关于Less的用法和相关内容，请查看官方文档：Less中文文档在less中两种注释的区别@charset "utf-8";// 第一种注释方式 "//" 不会被编译,即不会被编译到css文件中.box { width: 10px;}/* 第二种注释方式 "/ * * /" 会被编译, 即会被编译到css文件中 */.box {...

vue中使用laydate时间插件之前在做vue项目时使用iviewUI库中的DatePicker组件，发现DatePicker使用起来比较麻烦，尤其是对时间精确度上的限制不尽人意，操作起来也比较繁琐，总之在处理一系列时间组件相互联动上存在一大堆问题，比如DatePicker时间组件时间精确到分，组件1的value等于组件2的最小值，组件2的vlaue等于组件3的最小值，。。。依次类推，如...

填写表单分步步骤进度条使用原生JS实现填写表单分步步骤进度条效果图如下所示：步骤进度条&lt;div id="step"&gt; &lt;div class="step-wrap"&gt; &lt;div class="step-bg"&gt;&lt;/div&gt; &lt;div class="step-pro

自定义封装时间轴纵向滚动时间轴滚动以前没写过，今天写着玩，只实现了鼠标纵向滑动时间轴的效果，暂时没做三列联动效果效果图如下：鼠标纵向滚动时间轴具体实现的代码如下：&lt;div id="container"&gt; &lt;div id="select"&gt;&lt;/div&gt; &lt;div class="year column"&gt;&lt;

原生封装自定义滚动条有时候在开发过程中，为了一些美化效果，往往需要修改浏览器上一些默认的样式或者事件，让整个页面看起来更和谐，舒畅。比如在开发过程中就遇到修改该浏览器默认滚动条的需求，当然使用CSS的伪元素也可以修改浏览器滚动条的默认样式，但是存在兼容性问题，由于各大浏览器厂商对浏览器的设计略有不同，比如说浏览器内核，再加上浏览器高低版本的兼容，所以实现出来的效果并不尽人意。下面是针对...

CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法CSS实现盒子模型水平居中的方法水平居中效果图水平居中全局样式.parent { color: #FFFFFF; height: 200px; width: 200px; margin: 0 auto; background-color: #000000;}.child {...