如何实现小于12px的字体效果（transform: scale( )缩小元素）

最新推荐文章于 2023-05-31 17:12:04 发布
最新推荐文章于 2023-05-31 17:12:04 发布
阅读量8.4k 收藏 1
点赞数 1
分类专栏： css

transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;

transform: scale(0.7);

css 的属性，可以缩放大小

灵灵7
关注
专栏目录
前端浏览器字体小于12px的解决办法
09-22
当设计稿中的字体尺寸为10px或其他小于12px的值时，我们需要寻找解决办法来实现预期效果。本文将详细介绍一种利用CSS `transform: scale()` 属性解决此问题的方法。 首先，了解问题的根源：浏览器出于易读性的考虑...
transform设置字体缩放
mutouren_abc的博客
12-16 1827
可以通过设置transform属性，达到字体缩放的目的。 span { font-size: 12px; font-weight: bold; transform: scale(0.7); }
固定宽度，字体大小自适应（超出宽度自动缩小）
weixin_47318290的博客
12-30 2136
通过计算缩小的比例，用transform: scale()实现缩放字体。
css3的transform属性详解
m0_46384421的博客
03-01 1508
transform变形属性（主要讨论2D） css 3的transform属性可以修改css中可视化模型的坐标空间，元素通过transform属性进行移动（translate）、旋转（rotate）、缩放（scale）以及倾斜（skew） 注意：规范中有规定——如果元素的transform值不为none，则该元素会生成包含块的创建和层叠上下文 包含块的创建和层叠上下文会影响子元素的一些属性（这里我...
移动端小于12px 字体解决方案
A_one2010的博客
04-29 3138
随着h5 的兴起，设计的五花八门，页面存在许多小号字体。但移动端对小于12px的支持度不一，详见下面测试。 https://www.cnblogs.com/he-lian/p/4512276.html?_t_t_t=0.47901571358823203 那么我们如何在特定区域展示小号字体呢。首先想到的方案就是缩放，使用 transform: scale(0.5)，使用trans...
CSS3 scale()函数和多重转换
qq_42526440的博客
08-21 878
scale()方法根据已设定的宽度和高度参数来增加或减少元素的大小。 1代表原始尺寸，2代表原始尺寸的两倍，依次类推。 在下面的例子中，我们在水平和垂直方向上将第一个div减少0.6倍，并将第二个div在水平和垂直方向增加1.6倍。 CSS代码如下： div.first{ width:200px; height:100px; background-color:red; transform；scal...
chrom浏览器设置不了小于12px的文字大小的解决方法
01-19
Chrome下，设置小于12px字体，显示仍为12px, 这个不知道算不算Chrome的BUG，有人说他是人家臣Chrome的人性化设置，因为小于12px的文字会比较难看得清楚，不过有时项目需要设置小于12px的文字大小。 不去讨论是否是...
【CSS3学习笔记】17：变形效果 上
LauZyHou的笔记
08-31 852
本节学习通过CSS3中的变形效果，做到平移、缩放、旋转元素。 [1]transform属性 这个属性用于指定变形效果。 注：以下的参考点只是作为一个不动点来比对参考，并不是操作的基准点，基准点默认在盒子中心*移动前<!DOCTYPE html> <html lang="zh-cn"> <head> <title>CSS3变形效果[上]</title> <meta chars
css缩放（不同屏幕适配） transform属性的scale（）方法
hsany330的专栏
06-01 1万+
在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。 语法：transform： scaleX（x）； / 沿x轴方向缩放/ transform: scaleY(y); / 沿y轴方向缩放/ transform： scale（）； / 同时沿x轴和y轴缩放/ 说明： 跟translate()方法类似，缩放也有3种情况：scaleX()、scaleY()、scale()。参数x表示元素在x轴方向的缩放倍数，参数y表示元素在y轴方向的缩
vue中字体设置小于12px
weixin_44224712的博客
05-31 1376
一般浏览器字体最小是12px，需求中却经常会出现小于12的情况，css样式可以直接用。比如缩小到原字体的80%，但是当用这种缩放方式后，会导致这个盒子也一起缩放。就会出现字体位置偏差的情况，解决办法是。将基点位置移动到未缩放之前的位置。
第六章 element-ui组件 字体和边框
weixin_44224089的博客
08-11 1399
一、字体参数 字号 层级 字体大小 举例 辅助文字 12px Extra Small 用 Element 快速搭建页面 正文（小） 13px Small 用 Element 快速搭建页面 正文 14px Base 用 Element 快速搭建页面 小标题 16px Medium 用 Element 快速搭建页面 标题 18px large 用 Element 快速搭建页面 主标题 20px Extr
element 默认主题样式
我是小妖yun的博客
11-27 1476
element-variables.scss /* Element Chalk Variables */ // Special comment for theme configurator // type|skipAutoTranslation|Category|Order // skipAutoTranslation 1 /* Transition -------------------------- */ $--all-transition: all .3s cubic-bezier(.645,.0
利用transform：scale属性完成移动端适配
DreamFJ的博客
06-23 1418
//需要给设置scale属性的盒子添加css transform-origin: 0 0; // 缩放 (function() { var ww = window.innerWidth; var wh = window.innerHeight; let scaleX = ww / 750; if (scaleX < 1) { $('#scaleContainer, .flex-box') .css('transform', 'scale.
transforms.Scale--调整大小（Resize）、transforms.Lambda--配合lambda函数使用
MOL
06-01 2万+
class Scale(Resize): """ Note: This transform is deprecated in favor of Resize. """ def __init__(self, *args, **kwargs): warnings.warn("The use of the transforms.Scale transform is deprecated, " + "please use .
Transform scale 属性
weixin_44879787的博客
07-07 1万+
使用 CSS Transform scale 属性 CSS 属性transform里面的scale()函数，可以用来改变元素的显示比例。 下面的例子把页面的段落元素放大了 2 倍： p { transform:scale(2); } transform属性有很多函数，可以对元素进行调整大小、移动、旋转、翻转等操作。当使用伪类描述元素的指定状态如:hover时，transform属性可以方便的给元素添加交互。 下面是当用户悬停段落元素时，段落大小缩放到原始大小 1.1 倍的例子： <sty
用transform:scale();缩放
热门推荐
zhangqling的博客
08-13 6万+
当鼠标划过的时候缩放：  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;缩放&lt;/title&gt; &lt;style&gt; .box{ width: 200px; hei
css如何设置字体小于12px
最新发布
06-13
通常情况下，建议不要将字体设置为小于12px，因为这可能会导致阅读体验不佳。如果非常需要设置小于12px的字体，可以使用以下方法： 1. 使用相对单位：使用相对单位，如em或rem，可以根据父元素的字体大小来设置字体大小。这样可以确保字体在不同分辨率下的显示效果相对一致。 2. 使用字体缩放：可以使用CSS3的transform属性中的scale()函数来缩放字体大小。例如，可以使用transform: scale(0.8)来将字体大小缩小为80%。 3. 使用浏览器默认字体大小：浏览器通常会根据设备分辨率和像素密度自动调整字体大小，因此可以考虑使用浏览器的默认字体大小来确保最佳的阅读体验。 需要注意的是，字体大小的设置应该根据具体情况进行调整，以便在不同的设备和分辨率下都能够获得最佳的显示效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值