CSS3手机端字体不能小于12号的方法

最新推荐文章于 2023-04-10 17:25:53 发布

原创最新推荐文章于 2023-04-10 17:25:53 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS3确保手机端字体大小不会小于12号的方法，通过使用-webkit-transform属性进行缩放，有效地避免了过小的字体可能带来的阅读困难。

CSS3手机端字体不能小于12号的方法

  .xiaoyu12fontsize{
       -webkit-transform-origin: 0% 0%;
       -webkit-transform:scale(0.8);
   }



查看原文：http://newmiracle.cn/?p=725

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS3学习笔记总结，你值得拥有（呕心沥血之作，涵盖CSS3所有知识点）

孙叫兽的博客

08-21

4071

注意：本文演示的运行结果使用的是在线编译器，只显示body里面的内容，大家可以用浏览器进行查看完整效果包含head。简介 CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。 CSS3被拆分为"模块"。旧规范已拆分成小块，还增加了新的。一些最重要CSS3模块如下：选择器盒模型背景和边框文字特效 2D/3D转换动画多列布局用户界面边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。

字体小于12px、移动端不兼容0.5px的解决方案

weixin_39307273的博客

04-22

1594

字体小于12px：使用transform：scale（0.5） 0.5px边框：使用transform：scale（0.5）、使用伪类一、字体小于12px的解决方案浏览器默认字体最小为12px，如果想使用小于12px的字体该怎么办？常见的例子是购物车图标常...

参与评论您还未登录，请先登录后发表或查看评论

chrome显示小于12号字体的方法

dianchamian8747的博客

08-21

191

我现在做一个支持英文的网站，但是字体要设置小于12号字体，我百度方法是-webkit-text-size-adjust:none;但是谷歌为什么不支持啊，有没有解决办法让谷歌浏览器支持小于12字体的办法如下 <div><ul><li><a href=”#”>Home</a></li...

网页里小于12号的字体怎么处理？- transform:scale()

充电五分钟...

08-21

486

在新版的chrome中，已经禁止了改属性,建议使用CSS3中的方法:transform:scale(0.875); 当使用transform:scale(0.75)时; 不仅是文字变小了，整个文字所在的容器也同时会变小。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt.

解决文字无法缩小的问题

weixin_34179762的博客

11-10

580

在css设置文字大小的时候，到12px 的时候你在怎么缩小他，他的大小就是不变font-size：百分比来控制也不起作用-webkit-transform: scale(0.8); -o-transform: scale(1); display: inline-block; 转载于:https://www.cnblogs.com/xinlinux/p/4087046.html...

android css 字体,如何定义移动端字体Font-Family？

weixin_33341108的博客

05-26

2844

1.对于IOS手机系统，默认中文字体是HeitiSC、默认英文字体是Helvetica、默认数字字体是HelveticaNeue、无微软雅黑字体；2.对于Android手机系统，默认中文字体是Droidsansfallback、默认英文和数字字体是DroidSans、无微软雅黑字体；3.对于Winphone手机系统，默认中文字体是Dengxian(方正等线体)、默认英文和数字字体是Seg...

ios和android下数字没有垂直居中,手机端设置小号字体的上下居中问题

weixin_35991051的博客

05-26

748

问题描述如下图所示，需要在手机端实现一个上下居中的价格标签，字号 10。图0但对于小于 12 号的字体浏览器默认不会显示更小，因为浏览器默认会有个最小的字体大小，在 pc 端通常这个值是 12。如果非常必要显示更小的字体常规策略会使用 scale 缩放一定的比例来实现，代码如下：// 缩放字体的样式如下// 这里的 @rex 是手机端自适应的 rem 单位font-size: 10 * @rex;...

Html5 + Css3笔记详细汇总大全

weixin_50637054的博客

04-10

8068

Html5 + Css3笔记详细汇总大全

HTML5CSS3上-动画转换新特性前端面试题部分汇总

weixin_43403124的博客

02-28

1948

HTML5 CSS3HTML5 CSS3相关面试题HTML5新特性CSS3 新特性列举 5 个以上的 H5 事件微信小程序与 H5 的区别H5 的浏览器存储有哪些？简述 transform，transition，animation 的作用使用CSS怎么让Chrome支持小于12px的文字比如10px？（了解）1.0. HTML51.1. 语义化标签1.2. 多媒体标签1.2.1. audio 音频标签1.2.2.video 视频标签1.2.3. 兼容性1.3. H5表单1.3.1. H5新增表单1.3.2.

全宇宙最深入的CSS3 姬成渡一学习记录

m0_46424423的博客

07-21

1438

全宇宙最深入的CSS3 一、introduction 兼容性前缀 prefix（前缀） browser -webkit chrome/safari -moz firefox -ms IE -o opera 1.历史更新迭代，兼容性 ---- 加不加前缀 div{ border-radius: ; -webkit-border-radius:; -o-border-radius:; -moz-border-radius:; } 兼容性手册

谈一谈 html文字小于12px的完美实现

shentibeitaokong的博客

11-04

5980

首先我们以 .content { width: 150px; height: 150px; border: 1px solid red; margin: 0 auto; text-align: center; } .content p { font-size: 10px; } <div class="content"> ...

html怎么设置字体小于12px,前端浏览器字体小于12px的解决办法

weixin_39725885的博客

06-18

2661

前言最近做项目时，UI设计的字体10px,看效果图时发现字体仍然蛮大，改变12px时字体还是那么大，改变到14px时，字体变大了，发现规律，才知道原来浏览器为了让用户字体看的清楚，最小设置为12px。怎么办？设计就是10px?最终实现的效果图如下：效果图效果图效果图百度时，各位网上大神说利用transform: scale(0.5)可以满足要求，具体使用时，发现把整个div宽高都缩放了，不满足要求...

移动端开发根据html的字体大小来设置布局

小漠007的专栏

06-04

2174

链接：http://dhc.0lx.net/jfxt/index.html html： lang='zh-cn' id='HfontSize'> charset="utf-8" /> name="viewport" content="width=device-width,ini

html解决最小字体12,解决Chrome谷歌浏览器不支持CSS设置小于12px的文字

weixin_36312271的博客

06-02

1556

1、谷歌浏览器不支持设置CSS较小字体问题分析 - TOP网页常常为了排版美观，会使用忽大或小的文字，通常font-size文字为12px(像素)文字。设置大于12px文字字体，各浏览器都能显示出CSS所设置文字大小效果。但是CSS设置小于12px文字时候谷歌浏览器google Chrome就不能显示出CSS所设置小于12px的文字字体效果。2、谷歌浏览器支持设置font-size小于1...

CSS3的REM设置字体大小——笔记

aobishan2879的博客

08-15

161

px单位　　比较稳定精确，但在浏览器中放大缩小页面时会出现问题：用户改变浏览器字体，会使页面布局被打破，因此提出使用“em” em单位　　它需要一个参考点，一般以<body>的“font-size”为基准。比如使用“1em”来改变默认值“1em=16px”,这样一来，设置字体“14px”时，只需要将其设置为“1.4em” body { font...

chrome浏览器设置小于12号的字体不起作用？

weixin_30563917的博客

06-26

在某些chrome浏览器下，css里设置的10号字体竟然不起作用！仍显示12号大小，对比firefox、ie6、7、8、9，他们的显示都是好的。要是你也碰到这问题，可以这样解决： -webkit-text-size-adjust: none; 在css里加上这一句就可以。如你的样式是这样写的： .copyright{ font-size:10px; bac...

H5 移动端 ui图字号小于12px字号解决办法

qq_40509733的博客

05-20

2204

很多时候 ui图上会根据同一个区域根据不同字数来设置不同的字体大小，有时候会出现设计图字号小于移动端最小字号的问题。即使设置了小子号也不会缩小解决办法！使用缩放！！！代码： transform: scale(.8); //缩放比例 transform-origin: left; //缩放中心点，默认是center 以中心点缩放 ...

手机端应用的CSS字体样式规范

小虎哥的技术博客

06-26

6835

本人主要是前后端开发，设计不是很在行，在没有设计师的情况下，调字体样式真的很苦恼。这里整理一下自己通用的字体大小和颜色，方便后续直接使用。这里是借鉴了微信小程序的视觉规范，主要是用于手机端H5应用、像小程序、uni-app等。 /*只能为阿拉伯数字，金额、时间等，如弹出支付的金额字体大小*/ .font40pt { font-size: 40pt; } /*页面大标题字体大小*/ .fon...

移动端字体小于12px的解决方案