精华内容
下载资源
问答
  • Font-weight

    千次阅读 2019-02-18 16:54:21
    font-weight 字体浓淡(粗细)属性,该CSS属性用来设定字体的浓淡程度。 值:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit 如果值为 bolder 或者 lighter,...

    font-weight 字体浓淡(粗细)属性,该CSS属性用来设定字体的浓淡程度。

    值:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

    如果值为 bolder 或者 lighter,则是相对其父对象来说的。

    如果父对象的值为 normal,子对象值设为 bolder,则最终以 bold,即粗体显示。

    字体浓淡属性是根据用户电脑上安装的字体相应匹配改变的。在很多情况下,由于系统作了最相近的匹配,因此看不出不同的 font-weight 值有什么区别。

     

    可用值    值的说明

    normal    缺省值。字体正常显示。

    bold        粗体

    bolder     比粗体更加粗

    lighter      比正常字体淡

    100          至少和200一样淡

    200         至少和100一样粗,至少和300一样淡

    300          至少和200一样粗,至少和400一样淡

    400         字体正常显示,相当于normal。

    500         至少和400一样粗,至少和600一样淡

    600         至少和500一样粗,至少和700一样淡

    700         粗体,相当于bold。

    800         至少和700一样粗,至少和800一样淡

    900         至少和800一样粗

    在不同浏览器也有一定的差别,经试验,

    在火狐浏览器中,font-weight的不同值的效果会有些差别,

    在谷歌浏览器中,100~500是一样粗细,与normal一样;600~900一样,与bold一样;lighter与inherit与normal看起来一样;

    在ie9浏览器中,跟谷歌浏览器差不多。

     

     

    展开全文
  • 简介:  font-family 设置字体系列。  font-size 设置字体的尺寸。  font-style 设置字体风格。... font-weight 设置字体的粗细。  font 简写属性。   1.font-family 设置字体系列:      2.font-size
    简介:
      font-family 设置字体系列。
      font-size 设置字体的尺寸。
      font-style 设置字体风格。
      font-variant 以小型大写字体或者正常字体显示文本。
      font-weight 设置字体的粗细。
      font 简写属性。
     
    1.font-family 设置字体系列:
     
     
      2.font-size 设置字体的尺寸。
     ①设置字体大小
     ②可选值:
     •默认值:medium。一般浏览器默认是16px
     •smaller 把 font-size 设置为比父元素更小的尺寸。
     •larger 把 font-size 设置为比父元素更大的尺寸。
     • length 把 font-size 设置为一个固定的值。
     •% 把 font-size 设置为基于父元素的一个百分比值。
     • inherit 规定应该从父元素继承字体尺寸。
     注意:font-size 会影响 line-height 属性 进而影响一行中基线的位置。
    应用如图:
     
     
     3. font-style 设置字体风格。
    ①字体样式
    ②可选值:
     normal 默认值。浏览器显示一个标准的字体样式。
     italic 浏览器会显示一个斜体的字体样式。
     oblique 浏览器会显示一个倾斜的字体样式。
     inherit 规定应该从父元素继承字体样式。
    注:
    italic和oblique都是向右倾斜的文字,。
    区别在于Italic是指斜体字,而Oblique是倾斜的文字,对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.
     
     
    4.font-variant 以小型大写字体或者正常字体显示文本。
    ①小型大写字母字体
    ②可选值:
    •normal 默认值。浏览器会显示一个标准的字体。
    •small-caps 浏览器会显示小型大写字母的字体。
    •inherit 规定应该从父元素继承 font-variant 属性的值。
     
    5.font-weight 设置字体的粗细。
    ①字体的粗细
    ②可选值:
    •normal 默认值。定义标准的字符。
    •bold 定义粗体字符。
    •bolder 定义更粗的字符。
    •lighter 定义更细的字符。
    •100 ~900 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
    • inherit 规定应该从父元素继承字体的粗细。
     
    实际开发中,我们推荐使用关键字方式。因为700 和 900的粗细根本看不出区别
     
    6.  font 简写属性。
       

               /*font: bold 36px "Microsoft YaHei UI";*/

                /*font:  bold 36px   "Microsoft YaHei UI";*/

                font:  bold 36px/200px  "Microsoft YaHei UI";

     
     
    展开全文
  • 所以看起来应该是只有3种的字体大小

     

    所以看起来应该是只有3种的字体大小,目前还没有解决掉如何实现介于normal和bold的字体效果。

    展开全文
  • CSS 字体粗细 font-weight属性

    万次阅读 2018-02-13 22:11:05
    字体粗细在CSS中,通过 font-weight属性 用来设置字体的粗细值,取值为 lighter | normal | bold | bolder,默认为 normal。lighter 为细体,normal 为正常粗细,bold 为粗体,bolder 为特粗体。如:.lighter { font...

    在CSS中,通过 font-weight属性 用来设置字体的粗细值,取值为 lighter | normal | bold | bolder,默认为 normal。lighter 为细体,normal 为正常粗细,bold 为粗体,bolder 为特粗体。如:

    1. .lighter {
    2. font-weight: lighter;
    3. }
    4. .normal {
    5. font-weight: normal;
    6. }
    7. .bold {
    8. font-weight: bold;
    9. }
    10. .bolder {
    11. font-weight: bolder;
    12. }
    1. <p class="lighter">字体粗细: lighter</p>
    2. <p class="normal">字体粗细: normal</p>
    3. <p class="bold">字体粗细: bold</p>
    4. <p class="bolder">字体粗细: bolder</p>

    上述代码定义了 4 种不同粗细的字体,按顺序依次变粗。运行结果如图 3‑3 所示:

    font-weight属性效果图3-3 font-weight属性效果

    为了实现更细致的控制,CSS也允许使用数字来设置字体的粗细。数字必须是100的整数倍,取值在100~900 之间,值越大字体越粗。400 等同于 normal,700 等同于 bold。不同取值的结果如图 3‑4 所示:

    font-weight属性值对照表图3-4 font-weight属性值对照表

    浏览器会自动为一些元素(如,strong、h1~h6 和b)添加粗体格式,有些元素还继承了父元素粗体格式,可以通过 font-weight: normal 来取消这些元素的粗体格式。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • 话说CSS字体属性font-family、font-style、font-size、font-weightfont-variant: 使用CSS,可以对字体进行设置,字体属性包括五种常见属性:字体系列font-family、字体样式/字体风格font-style、字体大小font-...
  • CSS样式规则、字体样式属性(font-size、font-family、Unicode、font-weightfont-style、font综合设置字体样式)chrome调试工具
  • CSS使用font-family属性定义文本的字体系列。 p { font-family:"微软雅黑";} div {font-family:Arial,"Microsoft Yahei","微软雅黑";} 各种字体间用英文英文状态下的逗号隔开。如果是用空格隔开的多个单词组成的...
  • 在拿到 UI 设计稿时,可以经常看设计稿中常见的字体有 PingFangSC-Regular、PingFangSC-Medium、PingFangSC-Bold,并不会直接给我们 font-weight 的值。在这我们就需要知道常见字体和 font-weight 的对应关系 详细...
  • CSS中font-weight属性

    千次阅读 2019-03-28 08:53:26
    在这之前我使用该属性...定义和用法:font-weight 属性设置文本的粗细。 实例 设置三个段落的字体的粗细: p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;} 可能有的值...
  • light 对应font-weight值为100~300, regular对应font-weight值为400, medium对应font-weight值为500, bold一般对应600或700, black对应font-weight值为800, ultrablack对应font-weight值为900 ...
  • CSS 加粗(css font-weight)

    千次阅读 2019-08-21 20:43:48
    CSS 加粗(css font-weight) CSS 加粗知识与CSS加粗实例 DIV+CSS基础知识 CSS 加粗这里指的是通过DIV CSS控制对象的加粗。 使用CSS属性单词 font-weight 对象值:从100到900,最常用font-weight的值为bold font-...
  • 3.5 字体粗细font-weight

    2018-03-18 11:42:36
    一、font-weight属性 在CSS中,使用font-weight属性来定义字体粗细。 字体粗细和字体大小(font-size)是不一样的,粗细指的是字体的“肥胖”,大小指的是高和宽。 语法: font-weight:粗细值; font-weight属性...
  • font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体如下: font-family:字体...
  • font-weight:字体粗细

    2019-10-02 19:02:09
    font-weight:字体粗细 字体加粗除了用b和strong标签之外,可以使用CSS来实现,但是CSS是没有语义的. font-weight:属性用于定义字体的粗细,其可用属性值:normal|hold|bolder|lighter|100-900(100的整数倍) 小技巧:数字...
  • 字体粗细:'font-weight'属性 名称: font-weight 取值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 初始: normal 适用于: 所有元素 继承: 是 百分比: (不适用...
  • 如上2图描述字重的地方用的是Regular,知道这对应的font-weight值是多少吗? 字体粗细:‘font-weight’属性 名称: font-weight 取值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 ...
  • font-weight失效移动安卓处理方法

    千次阅读 2020-02-26 15:12:56
    font-weight失效移动安卓处理方法 1、BUG 现象 最近遇到一个奇怪的现象:一段文本设置了font-weight,但是在移动端中的浏览器中不显示加粗。 左侧是浏览器中移动端模拟器中的界面,可以看到对话框的标题和按钮...
  • font-weight 小结

    千次阅读 2018-08-25 11:23:34
    苹方字体的 CSS 设置 p { /*font-family: PingFangSC; 不能这样写,这么写不会应用上*/ font-family: PingFangSC-Regular;/*常规体*/ ...font-weight 字重对字体粗细的影响 100 — 900: 实践证明,...
  • font-weight我们很多人都用过,甚至经常用,但你们真的了解font-weight吗?今天我带大家深入了解一下font-weight 问题提出 font-weight的属性值有100、200、300、400、500、600、700、800、900和normal、bold、...
  • css字体加粗font-weight
  • 按照UI设计图给的 font-weight:600 直接设置,发现苹果机是字体是加粗的,安卓机没有变化,改成 font-weight:bold 就好了
  • 在设置字体样式本来是用各自单个属性设置的,嫌麻烦,不想在每个选择器里都用两行来设置字体的weight 和size,所以换成font的简写,一开始写成下面这样,但是发现不生效, * { font-family: "Microsoft YaHei UI ...
  • font-fmily font-family 规定元素的字体系列。font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。 Generic 为通用字体,Font 为特定字体,指定通用字是一...
  • CSS 使用font-family属性定义文本的字体系列。 p { font-family: "微软雅黑"; } div { font-family: Arial, "Microsoft Yahei", 微软雅黑; } 多个字体时 各个字体用英文逗号分开 遇见多个单词组成的有空格的 用...
  • 我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让...在Canvas中,可以通过绘图环境对象的font属性设置文本所采用的字型。该属性是一个CSS3格式的字型字符串,各个分量如下...
  • 主要是因为在font-weight属性时,我们使用了数值,例如font-weight:0,600,1000等等,而不同浏览器对此表现并不一致 解决方法 最简单的使用方法,使用font-weight的自带值:normal bold,即可很好的解决我们遇到...
  • 通用字体重量对应的font-weight

    千次阅读 2019-01-25 13:43:42
    字体粗细:‘font-weight’ 属性 名称: font-weight 取值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 初始: normal 适用于: 所有元素 继承: 是 百分比: (不...
  • 经常在开发中,给出的 UI,会有 字重,它对应(Regular、Normal、Medium、Light …)这些值,并不能直接看到 font-weight 对应的数值。 font-weight 属性执行字体中字形的重量,这取决于黑度等级或笔划粗细。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 171,041
精华内容 68,416
关键字:

font-weight