java 浏览器设置字体大小_css 字体设置(不同浏览器设置效果)
摘要:这篇CSS教程栏目下的“css 字体设置(不同浏览器设置效果)”,介绍的技术点是“浏览器设置、字体设置、浏览器、CSS、效果、设置”,希望对大家开发技术学习和问题解决有帮助。
乍一听css字体设置很容易,其实真做起来不然。我们工程师使用原力,他们在不同浏览器调整字体的大小知道的得到合适的结果。实际上有一点深入的理解就能起到很大的作用。
font-size 属性:
font-size属性可以被设置给任何一个html标签,即使是不能包含文本的标签也可以设置它,比如:
。可以被赋值是各种各样滴,比如:绝对,相对,长度值
一个元素的font-size属性会自动继承它父节点元素的font-size属性值,除非你覆盖了它。当你给font-size设置相对大小的时候这一点很重要。
font-size 设置的绝对关键字:
以下几个绝对字体大小的设置是有效的。当然他们是浏览器预定义设置的。给元素指定了绝对关键字font-size的时候,该元素就不会继承父元素的字体大小
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
尽管大多数的浏览器支持上面的关键字,但是他们的精确的大小是不相同滴。
font-size的绝对大小:
fone-size能被设置成下面得绝对大小:
mm: 毫米,例如:10mm.
cm: 厘米 ,例如:1cm ( = 10mm).
in: 英寸(inch),例如 : 0.39in ( ~= 10mm).
pt: point(点), 1pt 相当于 1/72 英寸, 例如: 12pt.
pc: pica(十二点活字), 1pc 是 12pt
px: pixel(像素), 例如: 14px.
一般说来上面得这些度量单位都有些问题
比如:毫米,厘米,英寸是对于不同媒体介质是不精确地,由于分辨率的设置不同,pt和pc就是相对不可靠地。pix来起来是最合适的,但是它能导致一些辅助性问题:IE下不能重新调整字体的大小。
相对大小:font-size属性能被设置成相对于父节点的字体大小的相对大小。
em: 1em相当于当前字体的1倍大小的字体。2em相当于当前字体的2倍字体大小的字体。
%: 100%相当于当前字体大小, 200% 相当于2倍字体的大小.
ex: 1ex 相当于当前字体中字母 ‘x’高度值一样大小的字体.
很少的开发者使用ex ,实际上某些情况下ex还是相当好用的,比如当你需要更精确的字体的大小的时候,1ex要比0.525em更好,更精确。
%和em的值是等价的,比如:50% = 0.5em, 100% = 1em, 120% = 1.2em等等,
尽管会有很少的一些浏览器有些微妙的差别,但是毕竟那是很少见的问题。如果你想要保存更小的字节,就需要用更短的名字去定义font-size的值。比如:50%要比0.5em占用字节少,1em要比100%占用的字节少。
文本字体的大小和页面放缩。
这是附加复杂深入部分,大多数浏览器允许用户在浏览器中做如下操作:
1.增加或减少基本字体大小(图片除外)
2.页面放缩是所有的文字和图片也相应发生放缩变化。
3.不但允许字体放缩,而且还允许页面放缩
备注(深入理解):在ie中如果页面中的元素的字体被用px(像素)赋值了,那么该元素的字体在页面放缩的时候不会发生变化。
如果您是有印刷行业背景的设计师将要转移到web设计,那就建议您不要给予用户过多的权利否则他们会打乱您的设计作品。您的设计作品被放大到200%的时候,或者字体减少至50%,就会被破坏掉。
css font-size 设置建议(规范)
一般来说,大多数情况下使用em或者%,这样字体就能被浏览器用更精细比例的字体支持。我个人建议使用百分比%来定义font-size大小,这种做法在一些老的浏览器中支持的也会更好。
当你在开发一个网站的时候有下面的一组建议提供给您:
1. 在testing之前,重置所有浏览器的字体的大小。
2.尽量合理的定义字体的大小,以便于在页面放缩的时候页面仍然保持良好的可读性。
java 浏览器设置字体大小_css 字体设置(不同浏览器设置效果)相关推荐
- Java实现一行代码生成二维码,可传输到前端展示,可自定义二维码样式,可设置图片格式,可对二维码添加图片,可对二维码添加文字,可以设置二维码大小、字体大小、字体颜色、边框颜色、边框大小等等
Java实现一行代码生成二维码,可传输到前端展示,可自定义二维码样式,可设置图片格式,可对二维码添加图片,可对二维码添加文字,可以设置二维码大小.字体大小.字体颜色.边框颜色.边框大小等等. 0.准备 ...
- Python使用matplotlib函数subplot可视化多个不同颜色的折线图、为多个子图添加总标题(main title)、自定义设置主标题字体类型、字体大小、字体颜色等
Python使用matplotlib函数subplot可视化多个不同颜色的折线图.为多个子图添加总标题(main title).自定义设置主标题字体类型.字体大小.字体颜色等 目录
- python设置坐标轴刻度值字体大小_python 设置xlabel,ylabel 坐标轴字体大小,字体类型...
本文介绍了python 设置xlabel,ylabel 坐标轴字体大小,字体类型,分享给大家,具体如下: #--coding:utf-8-- import matplotlib.pyplot as p ...
- android 设置字体大小和不同颜色,Android代码中设置字体大小,字体颜色,显示两种颜色.倒计时效果...
Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 android:id="@+id/uppaid_time" android:layout_ ...
- IntelliJ IDEA快速入门 | 第十七篇:IntelliJ IDEA中的常用配置(九)——设置默认的字体、字体大小、字体的行间距
统一设置默认字体 首先,进入IntelliJ IDEA的设置界面中,并展开Editor这一项,这时你会看到Font,选中它之后,可以看到如下图所示的界面. 然后,在以上界面中修改字体.字体大小以及字体 ...
- EasyExcel 设置字体样式(字体、字体大小、字体颜色、字体加粗、字体斜体、字体下划线、字体上标下标、字体删除线)
1 Maven配置 <!--hutool工具包--><dependency><groupId>cn.hutool</groupId><artifa ...
- android 设置ios 字体大小设置,解决修改系统字体大小APP字体跟着变大的问题
前言 最近在做项目的时候,碰到了这个问题,具体是:app中字体大小用了sp,然后修改手机系统字体大小后,sp设置的文字大小跟着系统变了,导致了布局挤压以及一系列的问题,经过研究找到了解决方法,在此记录 ...
- notepad++设置字体大小和字体样式
notepad++设置字体大小,字体样式 设置 -> 语言格式设置 -> 字体样式 -> 字体大小 在这个面板还可以设置字体样式.调整完毕后,勾选,使用全局字体 和 使用全局字体大小 ...
- sublime text3 字体样式_Sublime Text3自定义全部字体大小、字体类型和背景颜色
一.定义侧栏的背景颜色.字体大小和间距 1.按键:ctrl+shift+p,弹出窗口中输入pro,选择图中的PackageResourceViewer:Open Resource. 2.在新窗口输入t ...
- Markdown (CSDN) MD编辑器(二)- 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)
目录 1.Markdown现有的文本样式. 2.HTML的font标签-改字体.字体颜色.字体大小. 3.HTML的mark标签-标记文本 4.HTML的strong标签-加粗文本 5.HTML的em ...
最新文章
- Redis数据“丢失”问题
- vim 高级使用技巧第二篇
- Memcpy, blockcopy的进一步理解
- python按位右移的作用_python入门之左移,右移,按位与,按位或,按位异或,按位取反...
- “开启IT管理新时代”惠普软件客户论坛圆满闭幕
- [转]ASP.NET Core 指定环境发布(hosting environment)
- Java-js处理textarea自动生成的制表符(空格,换行,tab等)
- Shell 参数传递、 $* 与 $@ 区别
- MyFlash——美团点评的开源MySQL闪回工具
- cxTreeList 控件说明
- c语言 callback回调函数
- alien rpm deb,ubuntu下安装jdk过程及遇到的问题
- JAVAWeb项目 微型商城项目-------(七)后台添加用户管理和商品类型管理操作
- EJB是什么?(节选)
- 在计算机编程里pi是什么意思,编程中的术语“钩子”是什么意思?
- linux搭建智能dns步骤,PDNS实现智能DNS配置步骤linux操作系统 -电脑资料
- 计算机本地磁盘设密码,电脑硬盘,教您电脑硬盘怎么设置密码
- 激活数字营销新引擎,亚马逊云科技为企业带来数字化营销新体验
- Arcgis使用教程(十)ARCGIS地图制图之经纬网格添加
- PHP获取网页返回的JSON数据并在微信换行展示
热门文章
- 谷歌浏览器如何截全屏长图,超级方便实用
- 华为LTC/IPD/ITR三大核心流程变革看一篇文章就全明白啦!
- java.lang.NoSuchMethodError: org.jaxen.dom4j.DocumentNavigator.getInstance()【可能的解决办法】
- 代码 点胶gcode_3D打印☞Gcode代码详解(含详解PDF附件)
- oracle awr 定期,Oracle 每天自动生成AWR报告
- 2022-2028年中国光纤放大器行业市场发展潜力及投资策略研究报告
- 万能解压器安卓版_解压zip app下载-解压zip(手机解压缩软件)下载11.5.4 安卓版-西西软件下载...
- 【阿里妈妈营销科学系列】第四篇:营销渠道效果评估与归因
- 浙江大学课程攻略共享计划
- [互联网]互联网公司的种类