font-weight: 100-900 在各个浏览器中的表现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>font_weight</title>
  <style>
    * {margin: 0;padding: 0;}
    p {font-size: 30px; text-align: center;line-height: 1.5}
  </style>
</head>
<body>
  <p style="font-weight: 900">俱怀逸兴壮思飞, 遇上青天揽明月</p>
  <p style="font-weight: 800">俱怀逸兴壮思飞, 遇上青天揽明月</p>
  <p style="font-weight: 700">俱怀逸兴壮思飞, 遇上青天揽明月</p>
  <p style="font-weight: 600">俱怀逸兴壮思飞, 遇上青天揽明月</p>
  <p style="font-weight: 500">俱怀逸兴壮思飞, 遇上青天揽明月</p>
  <p style="font-weight: 400">俱怀逸兴壮思飞, 遇上青天揽明月</p>
  <p style="font-weight: 300">俱怀逸兴壮思飞, 遇上青天揽明月</p>
  <p style="font-weight: 200">俱怀逸兴壮思飞, 遇上青天揽明月</p>
  <p style="font-weight: 100">俱怀逸兴壮思飞, 遇上青天揽明月</p>
</body>
</html>

chrome:

IE:

firefox:

总结: 

IE fontweight 只有两种字号 : 100-500正常 600-900加粗

chrome, firefox 有三种字号 : 100-300正常 400-500中等 600-900加粗

原文地址:https://www.cnblogs.com/spotman/p/12497523.html

时间: 2024-10-13 21:06:27

font-weight: 100-900 在各个浏览器中的表现的相关文章

DIV+CSS在不同浏览器中的表现

 在给员工培训DIV+CSS的过程中,他们向我提出了很多问题,有些问题我自己也没有想到过于是抽了些时间自己进行了一番实验,全部实验在IE7和Firefox中进行: 实验一.如果一个div没有指定border属性那么这个div在浏览器中会不会出现边框呢? 结果:IE7:不会.Firefox:不会. 实验二.如果一个div只指定了border属性的粗细值,那么这个div在浏览器中会不会现边框呢? 结果:IE7:不会.Firefox:不会. 实验三.如果一个div指定了border属性的粗细值,并

在浏览器中解析Base64编码图像

JavaWeb: 搞定验证码http://www.jianshu.com/p/9284a31e6ce8 import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import javax.imageio.ImageIO; import javax.imageio.stream.FileImageOutputStream; import java.awt.*; import java.awt.image.BufferedImage;

获取元素样式对象 页面滚出 页面可是大小 添加监听事件 获取事件参数浏览器中位置 的兼容

/** * 获取浏览滚动出去的距离 * @returns {{scrollY: (Number|number), scrollX: (Number|number)}} */function scroll(){ return{ scrollY:window.scrollY||document.body.scrollTop||document.documentElement.scrollTop||0, scrollX:window.scrollX||document.body.scrollLeft|

微信打开网址添加在浏览器中打开提示

今天要加的是一个终极解决方法:弹出一个遮罩提示用户在新的浏览器窗口打开. 再也不用管微信如何的更新,直接判断微信的ua,然后弹出一个遮罩提示用户在浏览器中打开下载.并且不加关闭的按钮.类似于下面这样子: 这样子用户就只能在浏览器中打开,并且可以直接下载应用了.欢迎打开微信扫描查看(其他扫描没有效果). 演示二维码: 源码: <!DOCTYPE html> <html lang="zh_CN"> <head> <meta http-equiv=&

部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML <input type="file" id="choose" capture="camera" accept="image/*"> JavaScript var filechooser = document.getEleme

在ASP.NET MVC中利用Aspose.cells 将查询出的数据导出为excel,并在浏览器中下载。

正题前的唠叨 本人是才出来工作不久的小白菜一颗,技术很一般,总是会有遇到一些很简单的问题却不知道怎么做,这些问题可能是之前解决过的.发现这个问题,想着提升一下自己的技术水平,将一些学的新的'好'东西记录下来,一是加深印象:二是以后可以作为参考:三是希望博友们可以提出不足和可以优化的地方,一起讨论. 这个是我去一家公司没多久,让我做的小功能,主要是导出excel并在浏览器下载下来. 但是会有不同的细微的需求差别. 第一次发博客,有描述不清楚的地方还请见谅,希望各位多多指点. 进入正题 简单的需求描

浏览器中CSS的BUG

对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 其它请参考:CSS hack 针对IE6,IE7,firefox显示不同效果 1.div的垂直居中问题  vertical-align:middle;  将行距增加到和整个DIV一样高 line-height:200px;  然后插入文字,就垂直居中了.缺点是要控制内容不要换行. 2. margin加倍的问题      设置为float的div在ie下设

js 在浏览器中的限制

众所周知,由于安全方面的考虑,运行在浏览器中的JS脚本会被存在很多限制,这里做一下小小的归纳: 1.JS不允许访问宿主的计算机: js原本是不能读取或写入用户计算机的文件系统的(cookie除外),但是HTML5新增的file API,能让我们能突破这个限制(但是仍然有其他限制条件,有兴趣的同学可以参考http://www.html5rocks.com/zh/tutorials/file/filesystem/). 2.同源策略: 这个大家应该都知道,就是两个页面的域必须相同,才允许相互通信.

Selenium2学习-017-WebUI自动化实战实例-015-获取浏览器中的 cookie 信息

日常我们在使用浏览器时,尤其是登录 WEB 应用时,我们的一些信息其实是保存在了浏览器的 cookie 信息中.我们可以通过浏览器自带的开发工具,进行查看相应的 cookie 信息,例如在火狐.chrome 中均可通过 F12 打开开发者工具打开.以下截图为在 chrome 中打开易迅网时的 cookie 信息: 若是小主您登录了相应的网页应用,cookie 中还会含有您的一些用户信息内容.那么这些 cookie 信息在我们日常 WebUI 自动化脚本的编写过程中有什么用途呢 ? 可以作为网页打