`
fph888
  • 浏览: 5643 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

解决chrome 12像素字体大小限制

    博客分类:
  • css
css 
阅读更多
解决chrome 12像素字体大小限制



中文版的chrome有个12px字体限制的问题,就是当字体小于12px时候都以12px来显示,这个问题在中文网站中并不突出,因为中文字体为了显示清晰一般都定义为大于或等于12px,但如果是一些英文网站那就不好说了,这时12px的限制就会破坏页面的美感,甚至因为文字变大而导致页面变形。


可以使用Webkit 的内核的 -webkit-text-size-adjust 的私有 CSS 属性来解决,比如下面的代码就可以成功的解决,通过它即可实现字体大小不随终端设备或浏览器影响。样式定义如下:

.chrome10px{ -webkit-text-size-adjust:none; font-size:10px; }

只要 加了 -webkit-text-size-adjust:none; 字体大小 就不受限制了。










分享到:
评论

相关推荐

    chrom浏览器设置不了小于12px的文字大小的解决方法

    此外,尝试使用相对单位,如`em`,来替代绝对像素单位(px)设置字体大小,也是一种常见的解决方案。`em`单位允许文本随着容器的大小变化而自动调整,但根据测试结果,即使使用`em`,在Chrome中设置小于12px的文本...

    jQuery文字大小自适应屏幕特效代码

    我们可以设定一个最小和最大字体大小限制,以保证在各种屏幕尺寸下都保持良好的可读性。例如: ```javascript $(document).ready(function() { function resizeText() { var fontSize = Math.max(12, Math.min...

    FCKeditor 网页在线编辑器的使用方法

    默认的编辑器字体大小是12像素,但用户可以通过编辑器的CSS样式表来自定义字体大小和其他样式。 在安全性方面,如果FCKeditor将被用于公共访问的前台页面,建议只使用Basic工具栏,以限制潜在的功能和防止安全风险...

    CSS的保姆级基础知识

    字体大小通常用像素、百分比或其他相对单位表示,需要注意Chrome浏览器的最小字体限制。字体粗细可以设置为预定义的关键词(如`bold`)或数值(100到900)。字体样式如`italic`用于斜体,`normal`用于正常样式。 除...

    jsPDF-master 使用demo

    1. **文本操作**:jsPDF提供了添加文本到PDF页面的功能,包括设置字体、大小、颜色和对齐方式。 2. **图像处理**:可以将图片插入PDF,支持JPEG、PNG和SVG格式。 3. **图形绘制**:通过canvas元素,可以绘制线条、...

    css-loaders:使用CSS动画化的加载微调器的集合

    每个加载器都有一个以像素为单位的字体大小,所有其他尺寸都以em为单位,因此要更改加载器的大小,只需调整字体大小即可。 演示版 。 浏览器支持 IE 10以上 :heavy_check_mark: Chrome 4.0以上版本 :heavy_check...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    Viewport不局限于浏览器可视区域的大小,可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。 媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 ...

    科学实验室css模板

    在网页设计中,CSS是实现页面布局、颜色、字体、大小以及整体视觉效果的关键工具。"科学实验室css模板"就是针对科学实验室类网站设计的一种特定样式的CSS模板,它以浅绿色为主色调,营造出一种清新、淡雅的氛围,...

    面试题库.docx

    可继承的属性如颜色、字体大小等,优先级计算规则:ID > 类 > 标签 > 伪类/伪元素,内联样式和`!important`具有最高优先级。 7. **前端页面三层结构**:结构层(HTML,定义内容结构)、表示层(CSS,控制视觉呈现)...

    detect zoom

    这会影响到页面布局、字体大小以及图片等元素的显示。对于开发者来说,如果不考虑这个因素,可能会导致用户体验下降,特别是在响应式设计中。 "Detect Zoom"库通过JavaScript实现了对浏览器缩放率的实时检测。...

    面试宝典 v2-新增Vue和React.pdf

    对于CSS中的单位,px表示像素,是一种固定的单位,而em则是相对于当前元素的字体大小。在实现居中布局时,可以使用Flexbox、Grid或者传统的position和transform技术。 前端开发者还需要理解存储机制,例如cookies、...

    企业APP项目展示响应式网页模板

    4. **可伸缩的字体(Flexible Fonts)**:字体大小也应适应屏幕尺寸变化,确保文本始终可读。可以使用em或rem单位,它们与元素的父级相关联,实现动态调整。 5. **触摸友好的交互(Touch-friendly Interactions)**...

    前端面试题汇总

    - **em**:相对单位,相对于父元素字体大小。 **28. “reset”的CSS文件** - **Reset CSS**:重置浏览器默认样式,使不同浏览器渲染一致。 - **Normalize CSS**:保留有用的部分,默认样式,修复浏览器差异。 - **...

    9种超实用CSS技巧帮助设计师和开发者

    6. **@font-face**:CSS3的`@font-face`规则允许引入自定义字体,克服了传统Web设计中字体限制的问题。定义字体源后,可以在任何地方使用自定义字体,如`font-family: mySmashingFont;`。 7. **clearfix属性**:...

    前端面试汇总

    - **em**: 相对单位,相对于父元素字体大小。 **28. “reset” CSS文件** - **用途**: 清除浏览器默认样式差异,统一基础样式。 - **normalize.css**: 替代reset.css的一种方案,保留有用的部分默认样式。 **29. ...

    fontawesome-markers

    1. **矢量图形**:由于Font Awesome是基于字体的,所有的图标都是矢量图形,这意味着无论放大多少倍,图标都不会出现像素化,适应性强,适用于高分辨率显示器。 2. **CSS控制**:你可以像操作文字一样,通过CSS来...

    web前端面试题

    - `em` 是相对单位,相对于父元素字体大小。 **28. 描述一个 "reset" 的 CSS 文件并如何使用它。知道 normalize.css 吗?你了解他们的不同之处?** - **Reset CSS** 清除所有浏览器默认样式,使页面样式保持一致。...

    H5 面试题总结

    - **em**:相对单位,相对于父元素字体大小。 ##### 28. “reset” CSS 文件 - 用于消除浏览器默认样式的影响。 - `normalize.css`:旨在使浏览器的行为更加一致,并为 HTML 元素提供基本样式。 ##### 29. Sass、...

    球鞋商城展示响应式网站模板

    8. **高性能优化**:考虑到移动设备的性能限制,需优化图像大小、减少HTTP请求和利用缓存技术提高加载速度。 9. **SEO友好**:响应式设计有助于搜索引擎优化,因为只有一个URL地址,无需进行重定向,便于爬虫抓取和...

    经济小吃餐厅响应式网页模板

    7. **加载速度优化**:考虑到移动设备可能的网络限制,优化图片和其他资源的大小,减少HTTP请求,以提高网页加载速度。 8. **响应式图片和视频**:利用HTML5的`<picture>`元素和`srcset`属性,以及`<video>`元素的...

Global site tag (gtag.js) - Google Analytics