使用css/js缩放所有字体 - 腾讯云开发者社区

文章/答案/技术大牛

发布

【CSS3】CSS3 2D 转换 - scale 缩放 ② ( 使用 scale 设置缩放代码示例 - 图片缩放示例 )

div img { /* 设置过渡动画 */ transition: all 1s; } 鼠标移动到图片上方后 , 放大 , 这里使用...content="IE=edge"> CSS3...2D 转换 - scale 缩放 div { /* 设置浮动令 div 从左到右排列 */ float

1.4K3 0

css使用自定义字体教程

开源字体库站长字体 --字体资源丰富 fontke --字体资源丰富阿里inconfont --阿里图标库的字体，就是字体比较少使用字体文件一般下载的字体文件是.ttf格式，也有的是woff...、woff2、otf等定义字体 css文件使用@font-face定义一个字体： font-family必写，为字体随便起一个名字 src必写，字体文件的路径 font-display选填，建议写上，...字体文件加载完成前是否显示原生字体 1@font-face { 2 font-family: "font"; 3 src: url("..../assets/font/HarmonyOS_Sans_SC_Medium.subset.woff2"); 4 font-display: swap; 5} 使用字体定义好字体之后，在需要使用的元素上...汉仪霹雳体简全站--- 鸿蒙字体

2.4K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

【说站】css如何使用scale()方法进行缩放

css如何使用scale()方法进行缩放 1、缩放是指缩放和放大。在CSS3中，我们可以使用scale()方法根据中心点缩放元素。...2、三种方法可以缩放scale()，scaleX(x)、scaleY(y)、scale(x,y)。...(1)scaleX(x)：元素仅水平缩放(X轴缩放)； (2)scaleY(y)：元素仅垂直缩放(Y轴缩放)； (3)scale(x,y)：元素水平方向和垂直方向同时缩放(X轴和Y轴同时缩放)；实例...对元素进行缩放： img{ transition: .2s;} .img-wrapper:hover img{ transform: scale(1.2); ...} scaleX()水平方向 scaleY()垂直方向 scale()双方向以上就是css使用scale()方法进行缩放的方法，希望对大家有所帮助。

3.3K2 0

【CSS3】CSS3 伪元素字体图标 ( 生成 icommon 字体文件 | 字体图标基本使用 | 使用伪元素实现 icommon 字体图标显示 )

一、icommon 字体图标基本使用 ---- 字体图标指的是将图标做成字体样式 , 在放图标的地方使用文字即可实现图标显示 ; 1、生成 icommon 字体文件进入 https://...icomoon.io/app/#/select 网站 , 选择 491 个字体图标 ; 在上述下拉菜单中 , 选择 Select All 选项 , 一次性选择所有的 491 个字体图标 ; 点击右下角的..., 房子对应的字体编码是 e900 , 右侧的  是字体的占位符 ; 2、字体图标基本使用代码示例 : 字体图标显示 ---- 上述代码示例中 , 使用了字体图标 , 在 div 标签中嵌入了 span 标签 ; 如果使用伪元素 , 在其中插入标签 , 可以不使用 span 标签 ,...-- 使用伪元素选择器向 p 标签直接插入字体可以节省一层标签 --> 显示效果 :

3.9K3 0

【CSS3】CSS3 2D 转换 - scale 缩放 ① ( 使用 scale 设置缩放 | 使用 scale 设置缩放与直接设置盒子模型大小对比 )

一、使用 scale 设置缩放在 CSS3 中的 2D 转换中 , 可以使用 scale 样式 , 设置盒子模型的缩放属性 , 可以设置放大和缩小 ; scale 样式语法 : transform...scale 设置缩放与直接设置盒子模型大小对比使用 transform:scale 可以设置盒子模型的缩放倍数 ; 直接修改盒子模型大小 , 也可以实现上述相同的功能 ; 直接修改...那么下面的盒子就会被挤下去 ; 使用 transform:scale 设置缩放 , 可以任意设置缩放的方向 , 不会影响其它盒子模型的布局 ; 三、代码示例 ---- 1、代码示例 - 设置两个参数代表宽高缩放...content="IE=edge"> CSS3...content="IE=edge"> CSS3

4.9K1 0

使用纯CSS代码更改WordPress全站字体

废话不少博主喜欢美化自己的博客，而一个好看的字体可以让人眼前一亮，还可以提高阅读舒适度。作为一个二次元类（伪）的博客怎么能没有一个可爱的字体呢？...所以这里Daimon分享一下自己用的字体css（更换字体可以自己用github+jsdiver上传自己喜欢的字体，这样可以缓解服务器压力，毕竟宽带小的服务器加载几mb的字体还是略微吃力）。...具体效果看本站字体就行了(๑╹ヮ╹๑)ﾉ教程开始：首先进入你网站后台打开侧边栏→外观→自定义→额外CSS。...invite_code=1ew8m6j00jrrp 无何有之乡版权所有 -- 如未注明 -- 均为原创转载请注明：https://fsacg.cn/archives/161.html

3.2K2 0

【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )

文章目录一、 CSS 2.0手册使用 1、按照文档层次查找 2、搜索关键字查找文档二、 font-weight 字体粗细设置 1、语法简介 2、代码示例三、 font-style 字体斜体设置...1、语法简介 2、代码示例四、 font 字体样式综合写法 1、语法简介 2、代码示例 ① 不使用综合字体样式的代码 ② 使用综合字体样式的代码 ③ 执行效果一、 CSS 2.0手册使用...---- 1、按照文档层次查找 CSS 的使用方法可在 CSS 2.0 手册中查询 ; 这里以查询 font-weight 字体粗细设置为例 , 在文档左侧的 " 属性 | 字体 | font-weight...标签粗体显示 , 则可以使用 CSS 设置其不加粗 ; 在 CSS 中 , 可使用 font-weight 设置字体粗细 ; font-weight 属性值设置 : normal : 默认不加粗样式...---- 1、语法简介在 HTML 中可以使用 i em ( 推荐使用 ) 标签 , 实现文本斜体显示 ; 如果使用标签斜体显示 , 则可以使用 CSS 设置其不倾斜 ; 在 CSS 中

7.2K2 0

使用css设置div等比例缩放高宽

那么此时就需要在适应不同宽度的屏幕中进行等比例缩放div区域。...这个方法依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的，下面是W3C

6K1 0

【CSS3】CSS3 2D 转换 - scale 缩放 ③ ( 使用 scale 设置制作可缩放的按钮案例 )

水平居中对齐 , 垂直居中对齐 ; 当鼠标移动到按钮上之后 , 鼠标变为小手样式 , 并且按钮以中心位置为准 , 放大到原来的 2 倍 ; 二、代码分析 ---- 基础布局选择 : 这里使用...ul 列表标签实现 , 如果有多个按钮 , 可以直接将按钮放在 li 列表项中 , 或者直接使用 li 列表项作为按钮标签元素 ; 1...float: left; 一般设置左浮动属性 , 整个列表以及列表元素的宽高 / 边距需要精准的计算 , 才能使列表按照想要的方式进行排列 ; 取消列表默认样式 : 使用...: 按钮本身设置 0.5 秒的动画持续时间 , 当鼠标移动到按钮上方之后 , 宽高缩放为原来的 2 倍 ; /* 设置动画持续时间 .5s 相当于 0.5s */...transition: all .5s; li:hover { /* 宽高缩放为原来的 2 倍 */ transform

2K1 0

Fabric.js 使用自定义字体

这次就讲讲在 Fabric.js 中创建文本时怎么使用自定义字体、在项目运行时怎么修改字体、以及推荐一个精简字体库的工具。...学习本文前，你必须有一点 Fabric.js 的基础，如果没了解过 Fabric.js 可以阅读一下《Fabric.js 从入门到膨胀》创建文本时设置字体在 Fabric.js 中使用自定义字体库时...在创建文本时就设置字体，需要做以下几步：在 CSS 里引入字体。使用 Fabric.js 创建画布。等字体加载完成后再设置文本字体。将文本添加到画布中。...') }) } 精简字体库关于 Fabric.js 如何使用自定义字体库的内容说完了，但日常工作中我还遇到一个问题：某些特定地方会使用一些特殊字体，比如数字、项目名等地方...⭐ Fabric.js 使用自定义字体

2.8K2 0

CSS使用字体新姿势 unicode-range用法与使用场景

现在想要在CSS中使用自定义字体或者第三方字体，是一件非常简单的事情，只需要简单的使用@font-face规则即可导入各种字体文件。...本意是我自己使用的那个字体太大了，看能不能到一个稍微小一点的包含汉字的字体，当时找了一个合适的字体以后，Google Fonts提供在线使用，在使用了提供的link代码以后，放在网页中发现网页加载很快，...字体相关文件只用了几百毫秒，感觉还是比较震撼，这个字体下载下来以后发现有3M左右的大小，正常加载应该也需要6-10秒左右，这种毫秒级的加载感觉还是很震撼的，看了下提供的link里的css代码如下格式:...而后面的61这个值可以通过js的"a".charCodeAt().toString(16)来获取。这里使用一下张鑫旭老师整理的一些显示方式: HTML中字符输出使用&#x配上charCode值。...而在CSS文件中，如CSS伪元素的content属性，直接使用\配上charCode值。 unicode-range是U+配上charCode值。

3.9K1 0

使用 React JS 和 Tailwind CSS 进行 React Tilt

React Tilt易于使用，为我们的应用程序带来一丝魔法的触感。入门步骤首先，使用Vite创建一个新的React应用，并添加Tailwind CSS。...Scale（缩放）：指定元素的缩放，允许它们看起来更大或更小。Speed（速度）：控制进入/退出转场的速度，决定倾斜效果发生的速度。Transition（过渡）：启用或禁用进入/退出的平滑过渡。...Tilt选项在card.jsx文件中，为卡片组件定义一些选项，以便与React Tilt一起使用。在本教程中，我们将使用默认选项，但请随意查看自定义选项或根据需要创建新选项。...hello world" description="some description" /> );}export default App;通过以上步骤，我们可以在React应用中使用

1.6K0 0

Ratchet：使用 HTML，JS，CSS 创建 iPhone App 原型

Ratchet 是一个免费的开源的工具，它主要的功能就是可以使用最简单的 HTML，CSS，JavaScript 这些 Web 技术就能很容易创建 iPhone 应用原型。...Ratchet 使用非常简单，只需要简单的几行代码就能创建绝大部分 iOS 的组件，如：Bars, Lists, Buttons, Segmented controllers, Counts, Forms

2.1K2 0

使用js,html,css实现歌词滚动的效果

先看下效果吧由于实现这个效果的重心是在于js,html 和 css 大家看代码就明白了 html css"> 歌词滚动效果 // 这里等后面使用.../main.js" type="module"> css * { margin: 0; padding: 0; box-sizing...完整js代码 data.js var lrc = `[00:01.06]难念的经 [00:03.95]演唱：周华健 [00:06.78] [00:30.96]笑你我枉花光心计 [00:34.15]

2.3K1 0

CSS样式中汉字和字母分别使用不同字体的方法

说来也巧最近不知道发点什么文章，在后台测试代码的时候看见网友在文章“修改网页自定义字体的CSS代码+图文教程”反馈，怎么在css里汉字和字母使用不同的字体，应该怎么判断和实现，这个问题问得好，文章有内容了...，哈哈哈，因为没使用过中英文分开设置字体，所以我也得先去补习一下，搜索了下关键字，其实跟上篇文章也差不多，只是多个一个写法，使用 font-family 的调用方法，根据font-family的原则，假如客户终端不认识前面的字体...我们来看一看 CSS 中字体的 Fallback 机制： ?...遗憾的是，中文市场还有大量的用户在使用 Windows XP，宋体才是他们的主要中文字体。...还会暴露出一些奇怪的 bug，如在这些版本号的浏览器下使用中文字体（比方微软雅黑），要把该中文字体放到font-family属性的首位，可是会导致英文字体也会使用该中文字体渲染。

7K1 0

自适应丨Html5响应式（自适应）网页设计

所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js [javascript] view plain copy 　　　　css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js...[endif]--> 第二步：（注意）不使用绝对宽度，字体大小 [html] view plain copy width:auto; / width:XX%; 第三步：（注意）字体大小字体大小是页面默认大小的...100%，即16像素字体不要使用绝对大小"PX"，要使用相对大小“REM” [html] view plain copy html{font-size:62.5%;} [html] view plain...这时，可以尝试使用IE的专有命令 [html] view plain copy img { width:100%; -ms-interpolation-mode: bicubic;} 或使用js--imgSizer.js

4.5K5 0

【前端寻宝之路】学习和使用CSS的所有选择器

参考链接:CSS选择器参考手册如果标签一样,但我只想修改其中一个标签的内容格式,此时我们就需要用到:类选择器....-- 通过link引入css文件 --> <link rel="stylesheet" href="..... id选择器 CSS中使用 # 开头表示 id 选择器 id 选择器的值和 html 中某个元素的 id 值相同 html 的元素 id 不必带 # id 是唯一的,不能被多个标签使用(是和类选择器...使用 * 的定义,选取所有的标签. * { color: red ; } 页面所有的内容都会被改成红色....通配符选择器在实际应用开发中用来针对页面中所有的元素默认样式进行消除,主要用来消除边距 #fe{ font-size: 90px; } #sever{ color:aquamarine

1.2K1 0

前端大屏方案

ECharts 字体适配麻烦 rem 根字体驱动，移动端经典方案内容丰富、组件化开发配置繁琐，效果接近 scale 混合方案 rem 管布局 + vw 管字体 + JS 管图表生产级项目小 demo...1:1 写 px，不用任何换算还原度高：等比缩放，设计稿怎么画就怎么写兼容性好：transform 兼容性没问题踩坑记录坑 1：字体模糊。...方案三：rem（根字体缩放） rem 的原理是通过动态修改 html 的 font-size 来实现全局缩放。...组件内用 CSS clamp() 做弹性字体： .card-title { // 最小 12px，理想 1vw，最大 24px font-size: clamp(12px, 1vw, 24px)...布局：vw/vh ├── 字体：clamp() ├── 图表：JS 动态计算 └── 组件：Container Queries 常见 FAQ Q：大屏一般用什么设计稿尺寸

4721 0

3)js的基础语法使用以及css定位

返回顶部 js...三种js的引入方式： ? ? ? ? 也可以写成：使用var： ? ? ? ? 数字转换字符串： <!...undefined var b7 = null; // 非0既真 console.log(Boolean(b5)) console.log(Boolean(b7)) If 、if-else、if-else使用...清空数组的方式： var array = [1,2,3,4,5,6]; array.splice(0); //方式1：删除数组中所有项目 array.length = 0; //

1.5K1 0

CSS自定义属性：引入 | 使用var() | cal()计算 | css 与 js 的连接

CSS 自定义属性 CSS 自定义属性（也被称为 CSS 变量）,目前从 Can I use 上获取的信息显示除了 Edge外主流浏览器的最新版都已经支持这个特性了，而 Edge 也将支持这个属性。...本篇要点：自定义属性的概念 var() calc() 引入自定义属性，是一种开发者可以自主命名和使用的CSS属性。...如上面的代码， .foo 的字体颜色由 color 决定，但 --theme-color 对 .foo 没有作用。...就和平时用 JS 操作元素任意的属性一般，自定义属性也可以通过 getPropertyValue 和 setProperty 方法操作： const styles = getComputedStle(...oldColor = styles.getPropertyValue('--color').trim(); foo.style.setProperty('--color','green'); 属性值一旦被改变，所有与这个自定义属性相关的

1.4K2 0

点击加载更多

【CSS3】CSS3 2D 转换 - scale 缩放 ② ( 使用 scale 设置缩放代码示例 - 图片缩放示例 )

css使用自定义字体教程

【说站】css如何使用scale()方法进行缩放

【CSS3】CSS3 伪元素字体图标 ( 生成 icommon 字体文件 | 字体图标基本使用 | 使用伪元素实现 icommon 字体图标显示 )

【CSS3】CSS3 2D 转换 - scale 缩放 ① ( 使用 scale 设置缩放 | 使用 scale 设置缩放与直接设置盒子模型大小对比 )

使用纯CSS代码更改WordPress全站字体

【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )

使用css设置div等比例缩放高宽

【CSS3】CSS3 2D 转换 - scale 缩放 ③ ( 使用 scale 设置制作可缩放的按钮案例 )

Fabric.js 使用自定义字体

CSS使用字体新姿势 unicode-range用法与使用场景

使用 React JS 和 Tailwind CSS 进行 React Tilt

Ratchet：使用 HTML，JS，CSS 创建 iPhone App 原型

使用js,html,css实现歌词滚动的效果

CSS样式中汉字和字母分别使用不同字体的方法

自适应丨Html5响应式（自适应）网页设计

【前端寻宝之路】学习和使用CSS的所有选择器

前端大屏方案

3)js的基础语法使用以及css定位

CSS自定义属性：引入 | 使用var() | cal()计算 | css 与 js 的连接

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐