vue中字体设置小于12px

于 2023-05-31 17:12:04 发布
阅读量1.2k 收藏 3
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44224712/article/details/130973202
版权

一般浏览器字体最小是12px，需求中却经常会出现小于12的情况，css样式可以直接用

 transform: scale(0.8); 比如缩小到原字体的80%，

但是当用这种缩放方式后，会导致这个盒子也一起缩放

就会出现字体位置偏差的情况，解决办法是：transform-origin: 0 0; 

将基点位置移动到未缩放之前的位置

圆周率v1.1
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
设置字体小于12像素，首行缩进，文字间距，居中对齐，文字中划线，文字不换行，正常显示空格换行，允许单词内换行
m0_55258023的博客
06-27 1846
设置字体小于12像素，首行缩进，文字间距，居中对齐，文字中划线，文字不换行
详解vue-cli中使用rem,vue自适应
11-27
在这个例子中，当屏幕宽度小于或等于768px时，元素宽度为30rem；当屏幕宽度大于768px时，元素宽度为50rem。 ### 总结 在Vue CLI项目中使用`rem`和自适应布局策略可以提供更好的跨设备体验。通过理解`rem`的工作...
vue中的适配px2rem示例代码
10-17
主要给大家介绍了关于vue中适配px2rem的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 之字体小于12px设置
weixin_47409897的博客
11-16 4310
& > div:nth-child(1) { position: relative; font-family: PingFangSC-Regular; color: #666666; letter-spacing: -0.24px; text-align: left; width: 30px; span { position: absolute; left: -15px; top: -5px;
vue如何显示小于12px的字体，利用canvas
weixin_42080477的博客
02-21 2064
组件部分 <template> <view><canvas :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }" canvas-id="textCanvas"></canvas></view> </template> <script&g...
设置字体小于12像素的方法 以及解决字体变小后 文字顶点偏移在区域内位置变更的问题
李小乐er
11-13 2079
1.设置字体小于12像素 font-size: 12px; transform: scale(0.8); // 将字体缩小80% 也就是9.6px;如果想设置更小 可以修改scale中的数值 缩放前： 缩放后： 文字是变小了，但是原本的左对齐 现在变成了位置偏居中。 2.解决基点位置偏移的问题 transform-origin: 0 0; 将基点位置移动回原本的 X Y轴 （0,0）的位置 设置后 so 设置字体小于12像素 并且位置不偏移的解决方法： font-size
字体小于12px不生效的问题
m0_61289694的博客
04-27 770
在根据设计图做静态样式时发现需要用到字体为8px的，然后发现小于12px时字体大小不会生效 只需用到transform的scale属性就好 不过需要注意，如果我们只需要字体变小，就需要给文字再包一层，否则会整体缩小 位置和大小再去根据样式图调整 我调整后的代码： HTML CSS ...
chrom浏览器设置不了小于12px的文字大小的解决方法
09-25
`em`单位允许文本随着容器的大小变化而自动调整，但根据测试结果，即使使用`em`，在Chrome中设置小于12px的文本仍然可能会被浏览器强制显示为12px。 综上所述，解决Chrome浏览器无法设置小于12px文字大小的问题，...
iframe中页面显示不全1
08-08
在这个例子中，`<div>`的宽度和高度被设定为500px和300px，而`<iframe>`则被设置为相对定位并充满整个`<div>`。`position: absolute`使`<iframe>`相对于其最近的非静态定位祖先（这里就是`<div>`）定位，`top`和`...
前端面试宝典系列（css+js+vue+网络）
06-04
9. **字体大小限制**：Chrome最小字体为12px，但可以通过transform: scale实现小于12px的效果。 10. **CSS动画**：菊花图效果通过CSS关键帧动画实现，可以设置多个动画并调整动画延迟以达到逐个旋转的效果。 11. *...
前端十万字八股文面试笔记
08-21
12. **小于12px字体**：使用transform缩放、CSS3的`font-size-adjust`或`px-to-em`转换。 13. **居中方法**：如margin负值、`text-align:center`、`flexbox`、`grid`等。 14. **src与href**：src用于加载资源，href...
小于12px的字体
weixin_63712639的博客
02-11 220
小于12px的字体样式设置 // 如果需要小于12px的文字,只能使用css转换属性-缩放 transform: scale(.8); //缩放为80%大小 //这个不用写进去 用来解决另外的需求 transform-origin: left center; //变形的原点：左侧中央 另外,如果我们需要画一个0.5px的一条线也是一样的用这个属性就可以实现 ...
Vue+Less实现全局字体大中小切换
weixin_43776965的博客
11-08 4161
由于一些原因，公司项目不能使用sass，只好使用less了。在遇到切换全局字体大小这一需求时发现网上基本没有关于less的案例，在看了下less的文档后发现还是主要功能还是有的，可以实现字体大小切换。废话少说 新建minxin.less文件 代码如下： @import "./variable"; .add-size(){ [data-size="0"] & { font-size:@font_size_14; } [data-size="1"] & { font
设置font-size小于12px
一只程序喵
07-06 5665
前端css设置font-size小于12px不起效原因 因为 Chrome浏览器做了如下限制： font-size 有一个最小值 12px（不同操作系统、不同语言可能限制不一样），低于 12px 的，一律按 12px 显示。理由是 Chrome 认为低于 12px 的中文对人类是不友好的。 但是允许你把 font-size 设置为 0. css设置font-size小于12px方法（用css3中的缩放）： 效果： html: <div class="demo"> &lt
vue适配移动端字体
qq_41687299的博客
04-06 1272
1、需要安装插件 npm iamfe-flexible --save npm i postcss-px2rem –save 2、在index.html中设置meta标签： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 3、修改vue.config.js文件（没有则在根目录自己创建） ..
怎么让谷歌浏览器支持小于12px的字体
weixin_45799605的博客
05-06 141
怎么让谷歌浏览器支持小于12px的字体
修改elementUI组件样式无效的问题研究
qq_47443027的博客
04-02 1188
问题背景：el-tabs的选项卡默认字体是14px，大了，想改成12px，结果在style里面加样式总是不生效。 　　解决：样式放到app.vue里面，样式就生效了 .panel-content .el-tabs__item.is-top{ font-size 12px } 　　原理分析：在vue组件中我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后，实际上vue在背后做的工作是将当前组件的节点添加一个像”data-v-1233”这样唯一属性的标
你关注过浏览器最小字体为多大吗？
qq_40992225的博客
08-03 706
在页面编写时候会发现浏览器最小字体显示大小为12px，只要小于12px,无论fontSize怎么调整，字体大小都不变。注意：transform只有块级元素有这一属性。
VUE中动态改变字体大小
weixin_42943920的博客
12-05 6190
VUE中动态改变字体大小 父组件将自己的数据传递送给子组件展示，子组件监听click操作，emit发送出去，父组件监听通过emit发送的信息，改变控制字体大小的postFontSize，通过style展示
怎么在vue中使用postcss-px-to-viewport
最新发布
06-09
要在Vue中使用postcss-px-to-viewport，你需要进行以下步骤： 1. 安装必要的依赖：`npm install postcss-px-to-viewport --save-dev`。 2. 在项目的根目录下创建一个名为`postcss.config.js`的文件，并添加以下代码： ``` module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { viewportWidth: 750, // 设计稿的视窗宽度 unitPrecision: 3, // 小数点位数 propList: ["*"], // 需要转换的属性，* 表示所有 viewportUnit: "vw", // 转换后的单位 fontViewportUnit: "vw", // 字体转换后的单位 selectorBlackList: [], // 不需要转换的选择器 minPixelValue: 1, // 小于等于 1px 不转换 mediaQuery: false // 允许在媒体查询中转换 } } }; ``` 3. 在项目中使用`vue-cli-plugin-style-resources-loader`插件，该插件可以让我们在项目的任意地方引入一些全局的样式文件。安装插件：`npm install vue-cli-plugin-style-resources-loader --save-dev`。 4. 在`vue.config.js`文件中添加以下代码： ``` module.exports = { pluginOptions: { styleResourcesLoader: { preProcessor: "scss", patterns: [ path.resolve(__dirname, "./src/styles/variables.scss"), // 引入全局变量 path.resolve(__dirname, "./src/styles/mixins.scss") // 引入全局 mixin ] } } }; ``` 5. 在项目中安装`postcss-loader`，安装命令：`npm install postcss-loader --save-dev`。 6. 修改`vue.config.js`文件，添加以下代码： ``` module.exports = { css: { loaderOptions: { postcss: { plugins: [ require("postcss-px-to-viewport")({ viewportWidth: 750 }) ] } } } }; ``` 这样，你就可以在Vue项目中使用postcss-px-to-viewport了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值