首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS font-family 属性设置字体

前言 ---- font-family 属性用于给元素指定字体,是开发中使用非常频繁一个属性属性值是一个字体系列,每个值使用逗号隔开,如果字体名名称包含空格,那么字体名称必须使用引号包裹,设置字体是否可用取决于用户机器上该字体是否可用...给英文,中文设置不同字体 ---- 众所周知,font-family 属性原则是客户端不支持前面的字体时,自动往后查找可以使用字体 如果想要给英文,中文设置不同字体,可以使用一个仅支持英文字体...(比如: Arial),再找一个支持中文字体 如下所示: 遇到文字时,首选会尝试使用 Arial 字体,该字体支持英文,所以遇到英文会生效,遇到中文时 Arial 不支持,将自动使用后面的 Noto..." href="https://fonts.googleapis.com/css?...family=Noto+Sans+SC:100,300,400,500,700,900">C:100,300,400,500,700,900"> 在需要使用思源黑体地方使用 CSS 设置字体 font-family

2.6K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    CSS字体和文本关键属性

    font-weight 字体粗细 属性 说明 对应值 norml 正常(默认值) 100 lighter 较细 400 bold 较粗 700 bolder 很粗 900 font-style 字体风格...属性 说明 normal 正常(默认值) italic 斜体 oblique 斜体 在这里,有些字体有斜体italic属性,但有些字体却没有italic属性,oblique是让没有italic属性字体也能够有斜体效果...行高 letter-spacing 字母间距 word-spacing 词间距 字体样式针对是“文字本身”型体效果,而文本样式针对是“整个段落”排版效果。...首行缩进:text-indent:通常可以使用6个   来设置首行缩进,但是为了不冗余代码,我们建议使用text-indent来设置首行缩进,text-indent值应该是font-size值...去除所有的划线效果(默认值) underline 下划线 line-through 划线 overline 顶划线 具体对应效果: 大小写:text-transform:针对英文而言 属性 说明

    1.1K10

    CSS基础03-CSS字体属性

    03-CSS字体属性 CSS Fonts(字体属性用于定义字体系列、大小、粗细、文字样式(如斜体等)。 3.1字体系列 CSS使用font-family属性定义文本字体系列。...,根据先后顺序依次查看系统是否支持,若不支持则查看后一个,若全都不支持则使用系统默认字体显示 实际开发字体设置常用于标签来将整个页面字体全部修改掉 3.2字体大小 CSS使用 font-size...,我们应尽量给一个明确值,而不要使用默认大小 同样可以通过给设置字号大小来指定整个页面文字大小(标题标签除外,需要单独设定) 3.3字体粗细 CSS使用 font-weight属性设置字体粗细...)、lighter(细体)、number(直接使用数字,不要加单位,相对于单词属性值,数字属性值更推荐使用) 3.4文字样式 CSS使用 font-style属性设置文字样式,属性值有normal(默认值...,必须按照上面语法格式顺序来写,不可以更换顺序,并且各个属性值之间用空格相隔 不需要设置属性可以省略(取默认值),但必须保留font-size和font-family,否则font属性将不起作用

    1.9K20

    前端学习笔记之CSS属性设置 CSS属性设置

    字体属性 1、font-weight:文字粗细 取值 描述 normal 默认值,标准粗细 bord 粗体 border 更粗 lighter 更细 100~900 设置具体粗细,400等同于normal...:一般是12px或13px或14px 注意: 1、通过font-size设置文字大小一定要带单位,即一定要写px 2、如果设置成inherit表示继承父元素字体大小值。...非衬线字体 中文:宋体,微软雅黑,黑体 注意: 1、设置字体必须是用户电脑里已经安装字体,浏览器会使用它可识别的第一个值。...二 文本属性 1、text-align:规定元素文本水平对齐方式。...CSS显示模式转换 属性 描述 值 display 可以通过标签display属性设置显示模式 block 块级inline 行内inline-block 行内块级 4、div与span 布局都是用块级元素

    5.8K30

    通过CSS设置字体样式

    字体样式 (双标签):没有任何语义标签,通常和CSS结合使用。 font-family 设置字体类型 <!...} 浏览器显示 font-weight 设置字体粗细 div span{ font-family: 宋体; font-size: 24px;...font-style:italic; font-weight:bold; } 浏览器显示 这样设置嫌麻烦还可以在一个声明设置所有字体属性 浏览器显示 字体属性顺序...:字体风格→字体粗细→字体大小→字体类型; 总结 font-family——设置字体类型——font-family:"宋体"; font-size——设置字体大小——font-size:12px; font-style...——设置字体风格——font-style:italic; font-weight——设置字体粗细——font-weight:bold; font——一个声明设置所有字体属性——font:italic

    6K10

    CSSCSS 文本样式 ① ( font 字体设置 | font-size 字号大小设置 | font-family 字体设置 | Unicode 编码字体名称 )

    CSS , 字号大小 设置 语法如下 : p { font-size:16px; } 上述代码含义是 , 将 HTML 页面所有的 p 标签字号都设置成 16 像素 ; font-size...适配比较麻烦 ; 不同浏览器默认文字大小不同 , 尽量为每个 body 设置一个基本默认字体大小 , 推荐在 body 设置 16 px ; Google 浏览器默认文字大小 16 像素 ;...---- 1、 语法简介 CSS 文字 字体设置语法 : p { font-family:"微软雅黑"; } 常见字体 : 微软雅黑 , 默认字体 ; 宋体 黑体 如果 指定了多个字体 , 如下样式...: 如果设置多个字体属性值 , 使用逗号隔开 ; 中文名称 字体 , 使用双引号包裹 ; 英文名称 字体 , 直接写上去即可 , 不必使用双引号 ; 如果 字体 英文名称 包含 空格 , #..., $ 等字符 , 则必须加双引号 或 单引号 ; 使用系统默认字体 , 不要使用不常见字体 , 保证浏览器适配 ; 2、 Unicode 编码字体名称 在 CSS 设置 中文名称字体 时 ,

    2.7K20

    CSSCSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )

    ---- 1、 按照文档层次查找 CSS 使用方法可在 CSS 2.0 手册 查询 ; 这里以 查询 font-weight 字体粗细设置 为例 , 在文档左侧 " 属性 | 字体 | font-weight..." , 可以找到该文档 ; 在右侧 语法 和 参数 , 详细说明了 属性作用 , 以及 属性值如何设置 ; 2、 搜索关键字查找文档 此外 , 还可以在 CSS 2.0 手册 搜索栏..., 搜索该属性 ; 二、 font-weight 字体粗细设置 ---- 1、 语法简介 在 HTML 可以使用 b strong ( 推荐使用 ) 标签 , 实现 文本粗体显示 ; 如果 使用...标签 粗体显示 , 则可以使用 CSS 设置其 不加粗 ; 在 CSS , 可使用 font-weight 设置 字体粗细 ; font-weight 属性设置 : normal : 默认不加粗样式...---- 1、 语法简介 在 HTML 可以使用 i em ( 推荐使用 ) 标签 , 实现 文本斜体显示 ; 如果 使用 标签 斜体显示 , 则可以使用 CSS 设置其 不倾斜 ; 在 CSS

    4.7K20

    前端基础-css字体与文本属性

    二、css字体、文本属性 css学前小知识: 一张图片打印出来实际尺寸是由电子图片像素和分辨率共同决定,像素(Pixel)是指构成图片小色点,分辨率(单位DPI)是指每英寸(Inch)上像素数量...1.字体属性 a) font-size 设置字体大小 取值方式:数字 + 像素单位px(像素就是一个长度单位) 示意图 ?...多学一招:(1)取值用偶数(2)默认是16px大小(3)字体有多大,看字体高度 b) font-weight 设置字体粗细 取值:normal 正常(400)、bold加粗(700)、bolder...在实际工作最多就是normal (不加粗)和bold(加粗) c) font-style 设置字体风格 取值:normal 默认 显示标准字体样式 italic 字体倾斜 示意图 ?...2.字体可以写多组,中间用逗号隔开,显示不了第一个,就找第二个显示 3.字体名称如果有空格 # $ 这种特殊字符时候需要添加上引号 中文字体也需要添加引号 2.文本属性 a) 文本修饰 语法:text-decoration

    80930

    前端学习(7)~css学习(一):字体属性和文本属性

    本文重要内容 CSS单位 字体属性 文本属性 定位属性:position、float、overflow等 CSS单位 html单位只有一种,那就是像素px,所以单位是可以省略,但是在CSS不一样...font 字体属性 CSS,有很多非布局样式(与布局无关),包括:字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性(粗体、斜体、下划线)等。 这一段,我们先来讲一下字体属性。...css样式,常见字体属性有以下几种: p{ font-size: 50px; /*字体大小*/ line-height: 30px; /*行高*/...2、字体属性说明: (1)网页不是所有字体都能用,因为这个字体要看用户电脑里面装没装,比如你设置: font-family: "华文彩云"; 上方代码,如果用户 Windows 电脑里面没有这个字体...文本属性 CSS样式,常见文本属性有以下几种: letter-spacing: 0.5cm ; 单个字母之间间距 word-spacing: 1cm; 单词之间间距 text-decoration

    1.9K20

    zepto属性设置

    上次看zeptoinit方法时,有一段属性设置代码,先来看看其表现: if (isPlainObject(properties)) { nodes = $(dom) $.each...,一直很困惑,为什么实例化dom之后,对nodes进行属性设置会导致dom也有了属性设置结果。...回想了一下,在javascript,对象是引用,而不是赋值,而dom不是zepto对象就是Dom对象,假如是zepto对象的话,那么nodes其实就是dom,因为在zeptoinit方法,传入参数是...那么attr方法,传入回调函数,则是首先判断thisnodeType是否为1,nodeType可以参考这里nodeType。...若是,则调用setAttribute方法直接将传入key-value对象设置属性,否则就通过一个funcArg函数来设置属性name值。

    1.9K20

    CSS字体相关小技巧

    让我们仔细看看规范: 开发者使用字体名如果与用户使用环境已有的某个字体名字相同,在使用样式表文档中会有效覆盖底层字体。...这使得网页开发者可以自由选择字体名称,而毋庸担心与给定用户环境存在字体名产生冲突。 规范如此定义是因为选择出与每个用户环境不产生冲突名字这件事想想就十分可怕!...我们再次参考下规范: local中放入是一串特定格式字符串,这串字符串用于唯一标识庞大字体一套字体。...他们通过@font-face重命名了一系列 local,加入不同 font-weight本地字体源来简化 font-family属性值。...同样也不再需要在你CSS为 font-family属性赋其他杂乱值了。简单而有效!

    1.3K40

    Flutter如何设置全局字体

    , 你可以在TextStyle fontFamily 属性中使用. asset 是相对于 pubspec.yaml 文件路径.这些文件包含字体字形轮廓。...在构建应用程序时,这些文件会包含在应用程序asset包。 可以给字体设置粗细、倾斜等样式 weight属性指定字体粗细,取值范围是100到900之间整百数(100倍数)....BaseApp也在library,所以最开始将字体文件放在了library,然后在BaseAppMaterialApp设置了fontFamily。...但是在flutter web(其他平台未测),通过上面设置全局字体后,发现TextSpan字体并未生效,还是系统字体。...所以不论是全局样式还是为Text单独设置样式,只要不冲突就都会生效。 但是在TextSpan源码,发现并没有这一步操作,所以设置全局字体对它不起作用。

    2.9K20
    领券