如何用css设置网页字体
网页字体该如何设置？
⽹页字体该如何设置？我们在⽹页制作过程中肯定会想⼀个问题，那就是⽹页⾃⼰设置的问题，到底该设置什么字体？⽹页字体多⼤合适？下⾯就给出⽹页⾃⼰设置的⼀些相关注意事项。
我们在⽹页制作过程中肯定会想⼀个问题，那就是⽹页⾃⼰设置的问题，到底该设置什么字体？⽹页字体多⼤合适？下⾯就给出⽹页⾃⼰设置的⼀些相关注意事项。
·最好是使⽤⼤多数⼈的机器上可能有的常见的truetype字体。
Arial、Times Roman、Courier、Verdana和Century Gothic是常见的字体，中⽂⾥⾯Windows⾃带宋体、⿊体及楷体。
如果你使⽤不常见的字体，不要忘记为没有此字体的浏览器指定替代的字体。
通过css设置font-family来制定字体集，浏览器可以顺序查找使⽤你制定的⼀系列字体，让你的页⾯看起来还不错。
·装饰性字体组好只⽤于标题。
然后⽤css的font-family指定缺省字体。
·不要过分地使⽤字体，在同⼀页⾯中不要使⽤太多不同的字体。
通常使⽤两种字体就⾜够了：⼀种⽤于标题，⼀种由于⽂本。
某些字体组合常常⽆法⼯作。
例如，不要再同⼀页⾯中使⽤script和斜体字体，不要在同⼀页⾯中使⽤⼀种以上的装饰性字体。
·尝试使⽤相同字型的不同浓淡度使页⾯更有趣。
如果你的页⾯相当乏味，没有图像，那么尝试设置促体的浓淡度（通过css的font-weight特性），这会使页⾯更⽣动。
使⽤不⽤的浓淡度不仅可以使页⾯更吸引⼈，它还是组织信息的最有效的⽅法之⼀。
·不要在同⼀页⾯中放两种sans serif字体，除⾮你确实知道在做什么。
如果你要在同⼀页⾯中使⽤两种字体，它们应该来⾃两种不同的字型类别。
·不同的操作系统及浏览器中pt字会不⼀样⼤。
pt（磅）最早是⽤于印刷的字号，在windows和mac os⾥⾯，相同的pt值会对应不同的px（像素）值。
唯⼀可靠的单位，就是px。
使用CSS实现自定义字体样式
使用CSS实现自定义字体样式字体在网页设计中扮演着重要的角色，能够直接影响到网页的美观度和阅读体验。
除了常用的系统字体外，我们也可以通过CSS来实现自定义字体样式，以满足不同设计需求。
本文将介绍如何使用CSS实现自定义字体样式，并提供一些实用的技巧。
一、引入自定义字体文件首先，我们需要准备自定义字体文件，通常为.ttf或.otf格式。
在CSS中，我们可以通过@font-face规则来引入这些字体文件，并为其定义一个名字。
具体的代码如下所示：```@font-face {font-family: 'customfont'; /* 自定义字体的名字 */src: url('customfont.ttf') format('truetype'); /* 字体文件的路径和格式*/}```在上面的代码中，我们通过font-family属性为自定义字体命名为'customfont'，同时指定了字体文件的路径和格式。
二、使用自定义字体样式一旦我们引入了自定义字体文件，就可以在网页中使用自定义字体样式了。
以下是如何使用自定义字体的代码示例：```body {font-family: 'customfont', sans-serif; /* 使用自定义字体 */}h1 {font-family: 'customfont', sans-serif; /* 使用自定义字体 */font-size: 24px;font-weight: bold;}p {font-family: Arial, sans-serif; /* 使用默认字体 */font-size: 16px;}```在上述代码中，我们通过font-family属性将自定义字体'customfont'应用到了body、h1元素上。
使用逗号和sans-serif作为后备字体，当自定义字体无法正常加载时，将会使用默认的sans-serif字体。
css中引入字体文件的方式
css中引入字体文件的方式
在CSS中引入字体文件有几种常见的方式。
首先是使用@font-face规则，在CSS文件中定义自定义字体，然后将其应用于网页中的元素。
这种方法允许开发者使用他们自己的字体，而不仅仅依赖于用户计算机上已安装的字体。
另一种方式是使用链接外部字体文件。
开发者可以通过在CSS 文件中使用@import规则或者在HTML文件中使用<link>标签来链接外部字体文件，这样就可以在网页中使用这些字体。
此外，还可以使用font-family属性来引用Web字体。
Web字体是通过网络引入的字体，可以通过在CSS文件中指定字体的URL 来引入。
最后，还可以使用字体提供商的服务，如Google Fonts或Adobe Fonts等，这些服务提供了大量免费的Web字体供开发者使用，开发者只需在网页中引入提供的链接即可使用这些字体。
总的来说，CSS中引入字体文件的方式有多种选择，开发者可以根据自己的需求和偏好来选择合适的方式来引入字体文件。
详解CSS定义字体、颜色、背景等属性
详解CSS定义字体、颜⾊、背景等属性•字体属性•字体font-family:"字体1","字体2",... 例：font-family：“宋体”;•字号font-size:⼤⼩的取值例：font-size:16px; 注意：xx-small:绝对字体尺⼨，最⼩。
x-small:绝对字体尺⼨，较⼩。
medium:绝对字体尺⼨，正常默认值。
对应还有large、x-large、xx-large等。
larger:相对字体尺⼨，相对于⽗对象中字体尺⼨进⾏相对增⼤。
smaller:相对字体尺⼨，相对于⽗对象中字体尺⼨进⾏相对减⼩。
length:可采⽤百分⽐或长度值，不可为负值，其百分⽐取值是基于⽗对象中字体的尺⼨。
•字体风格font-style:样式的取值例：font-style:normal .normal是默认的正常字体；italic以斜体显⽰⽂字；oblique属于中间状态，以偏斜体显⽰。
•加粗字体font-weight:字体粗细值例：font-weight:normal. 其中normal表⽰正常粗细；bold表⽰粗体；bolder表⽰特粗体；lighter表⽰特细体；number不是真正的取值，其范围是100~900，⼀般情况下都是整百的数字，如200、300等。
•⼩写字母转化为⼤写font-variant:取值例：font-variant:small-caps;能将⼩写的英⽂字母转化为⼤写字母且字体较⼩。
另⼀个normal,表⽰正常显⽰。
•CSS中可采⽤复合样式，来简化代码，如：.h{font-family:"宋体"; font-weight:bold; font-style:italic;}•颜⾊和背景属性•颜⾊属性color:颜⾊取值例：color:red。
color可以⽤关键字或者⼀个⼗六进制的RGB值。
color:#ff0000 表⽰红⾊ color:#ffff00 表⽰黄⾊ color:#000099 表⽰蓝⾊关键字就是颜⾊的英⽂名称，如red,green,blue,分别表⽰红、绿、蓝。
css改变字体大小的方法
css改变字体大小的方法CSS是一种用于网页设计的样式表语言，它可以控制网页的外观和布局。
其中，改变字体大小是CSS中最常用的样式之一。
在本文中，我们将介绍如何使用CSS改变字体大小。
一、使用font-size属性CSS中的font-size属性用于设置字体大小。
它可以接受不同的单位，如像素（px）、百分比（%）、em等。
下面是一个例子：```p {font-size: 16px;}```这个例子将所有段落的字体大小设置为16像素。
如果你想将字体大小设置为百分比，可以这样写：```p {font-size: 120%;}```这个例子将所有段落的字体大小设置为父元素字体大小的120%。
如果你想将字体大小设置为em单位，可以这样写：```p {font-size: 1.2em;}```这个例子将所有段落的字体大小设置为父元素字体大小的1.2倍。
二、使用媒体查询媒体查询是CSS中的一种技术，它可以根据设备的屏幕大小、分辨率等特性来应用不同的样式。
使用媒体查询可以让网页在不同的设备上呈现出最佳的效果。
下面是一个例子：```@media screen and (max-width: 768px) {p {font-size: 14px;}}```这个例子将在屏幕宽度小于等于768像素时，将所有段落的字体大小设置为14像素。
这样可以让网页在小屏幕设备上更加易读。
三、使用rem单位rem是CSS中的一种相对单位，它是相对于根元素（即html元素）的字体大小来计算的。
使用rem单位可以让网页在不同的设备上呈现出相同的字体大小。
下面是一个例子：```html {font-size: 16px;}p {font-size: 1rem;}```这个例子将所有段落的字体大小设置为根元素字体大小的1倍。
如果根元素字体大小为16像素，那么所有段落的字体大小也将为16像素。
如果根元素字体大小为20像素，那么所有段落的字体大小也将为20像素。
css设置各种中文字体如雅黑、黑体、宋体、楷体等等
css设置各种中⽂字体如雅⿊、⿊体、宋体、楷体等等复制代码代码如下:.selector{ font-family:"Microsoft YaHei",微软雅⿊,"MicrosoftJhengHei",华⽂细⿊,STHeiti,MingLiu }说明：加上中⽂名“微软雅⿊”是为了兼容opera。
MicrosoftJhengHei为微软正⿊体，STHeiti为华⽂⿊体，MingLiu记得11px下的中⽂有着不凡的效果。
在css中推荐使⽤中⽂字体的英⽂表⽰法，以下附常见中⽂字体的英⽂名：Mac OS的⼀些：华⽂细⿊：STHeiti Light [STXihei]华⽂⿊体：STHeiti华⽂楷体：STKaiti华⽂宋体：STSong华⽂仿宋：STFangsong儷⿊ Pro：LiHei Pro Medium儷宋 Pro：LiSong Pro Light標楷體：BiauKai蘋果儷中⿊：Apple LiGothic Medium蘋果儷細宋：Apple LiSung LightWindows的⼀些：新細明體：PMingLiU細明體：MingLiU標楷體：DFKai-SB⿊体：SimHei宋体：SimSun新宋体：NSimSun仿宋：FangSong楷体：KaiTi仿宋_GB2312：FangSong_GB2312楷体_GB2312：KaiTi_GB2312微軟正⿊體：Microsoft JhengHei微软雅⿊体：Microsoft YaHei装Office会⽣出来的⼀些：⾪书：LiSu幼圆：YouYuan华⽂细⿊：STXihei华⽂楷体：STKaiti华⽂宋体：STSong华⽂中宋：STZhongsong华⽂仿宋：STFangsong⽅正舒体：FZShuTi⽅正姚体：FZYaoti华⽂彩云：STCaiyun华⽂琥珀：STHupo华⽂⾪书：STLiti华⽂⾏楷：STXingkai华⽂新魏：STXinwei注：如果字体的名称是⼀个单词的，不需要加引号，否则在ie6，7⾥⾯会失效，并且后⾯的样式也会不⽣效！。
CSS中的字体大小设置属性总结
CSS中的字体⼤⼩设置属性总结在Web中使⽤什么单位来定义页⾯的字体⼤⼩，⾄今天为⽌都还在激烈的争论着，有⼈说PX做为单位好，有⼈说EMS优点多，还有⼈在说百分⽐⽅便，以⾄于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK⼤局。
不幸的是，仍然有不同的利弊，使各种技术都不太理想，但⼜⽆法不去⽤。
真是进也难，退也难呀。
最近在学习em的相关知识的时候，⽆意之间让我拾得⼀宝，就是使⽤rem来设置Web页⾯的字体⼤⼩。
让我⼀下⼦就来劲了，⼀⼝⽓看完并测试了⼀回，还真是爽歪歪的呀。
师傅说好东西不能吃独⾷，于我就在这⾥给⼤家吹吹这个从没见过的REM。
在详细介绍rem之前，我们先⼀起来回顾⼀下我们常⽤的两种记量单位，也是备受争论的两个：1.PX为单位2.EM为单位PX为单位在Web页⾯初期制作中，我们都是使⽤“px”来设置我们的⽂本，因为他⽐较稳定和精确。
但是这种⽅法存在⼀个问题，当⽤户在浏览器中浏览我们制作的Web页⾯时，他改变了浏览器的字体⼤⼩，这时会使⽤我们的Web页⾯布局被打破。
这样对于那些关⼼⾃⼰⽹站可⽤性的⽤户来说，就是⼀个⼤问题了。
因此，这时就提出了使⽤“em”来定义Web页⾯的字体。
em为单位这种技术需要⼀个参考点，⼀般都是以\<body>的“font-size”为基准。
⽐如说我们使⽤“1em”等于“10px”来改变默认值“1em=16px”，这样⼀来，我们设置字体⼤⼩相当于“14px”时，只需要将其值设置为“1.4em”。
CSS Code复制内容到剪贴板1. body {2. font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/3. }4. h1 {5. font-size: 2.4em; /*2.4em × 10 = 24px */6. }7. p {8. font-size: 1.4em; /*1.4em × 10 = 14px */9. }10. li {11. font-size: 1.4em; /*1.4 × ? = 14px ? */12. }为什么“li”的“1.4em”是不是“14px”将是⼀个问号呢？如果你了解过“em”后，你会觉得这个问题是多问的。
css设置文字思源雅黑，分为medium,regular,light
css设置文字思源雅黑，分为 medium,regular,light
html引 入 思 源 黑 体
通nt:
<link rel="stylesheet" href="https:///css?family=Noto+Sans+SC:100,300,400,500,700,900">
Regular、 Normal、 Medium、 Light 对应的 font-weight值
字体粗细：‘font-weight’属性 名称： font-weight 取值： normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 初始： normal 100 - Thin 200 - Extra Light (Ultra Light) 300 - Light 400 - Regular (Normal、Book、Roman) 500 - Medium 600 - Semi Bold (Demi Bold) 700 - Bold 800 - Extra Bold (Ultra Bold) 900 - Black (Heavy)
字体：Noto Sans SC 大小：100, 300, 400, 500, 700, 900
在需要使用思源黑体的地方设置CSS样式：
font-family: "Noto Sans SC"; font-weight: 100;
TIP：Link标签的rel属性的全称是relationship，表示引用内容与当前HTML的关系。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
属性值：长度 - 用毫米(mm)，厘米(cm)，英寸(in)，磅(pt)，象素(px)，pica(pc)，ex(小写字母 x 的高 度)或 em(字体高度)作为度量单位。
百分比 - 相对于其父元素字体大小的百分比。绝对尺寸分为 xx-small, x-small, small, medium, larg e, x-large, xx-large 七种，它们以各种字体的 medium 尺寸成比例缩放，每一级 1.5 倍。相对尺寸:有 larg er 和 smaller 两种，根据字体原来的大小来决定缩放以后的大小。百分比：把字体设置成原来尺寸的百分
语法：{font:属性值 1 属性值 2 ...属性值 n}
下面我就给大家举一个例子:把“网络化”这三个字设置为加粗的字体首先在页面打入“网络化”这三个 字，由于字体的粗细是由“字体加粗”这个属性决定的，所以在进入 html 编辑模式找到这些字后，就在它们
的前后分别加上“字体加粗”及其属性值的代码，如：<span style="font-weight: 700">网络化</span>
属性值：正常度 - normal
相对度 - bold, bolder, light, lighter
渐变度 - 100, 200, 300, 400(相当于 normal), 500, 600, 700(相当于 bold、 lighter、 bolder、以 及数值 100－900。
语法为：h1 < font-weight: 属性值>
比值，可以任意指定数值。
语法为：{font-size:属性值}
6、字体（font） 功能：简写属性，提供了对字体所有属性进行设置的快捷方法。
属性值：字体属性值为前面已列出的值，，内容的顺序为：font-style; font-variant; font-weight; font -size; line-height; font-family。可省略部分属性，属性值间用空格分开。
BODY {FONT-SIZE: 9pt} TH {FONT-SIZE: 9pt} TD 如果直接拷贝进去，会产生多余代码。 将此文件保存在站点目录下。编辑网页时，点击格式--样式表链接，在弹出窗口中选择以上文件即可。 上面所讲述的仅仅是 css 的一些简单应用，只要你能够深入的了解 css,并熟练的运用它，就能将你的网页
作用，
因此，我就讲解一下如何在 frontpage2000 中运用 css 设置网页字体。
我们可以用 css 设置出无数种网页字体，但万变不离其宗，任何的变化都要遵循 css 的基本语法。因 此我们先来了解一下 css 的基本语法，它是这样子的：HTML 标志 { 标志属性：属性值；标志属性：属性 值；标志属性：属性值；…… }。设置字体时，只要正确的更改字体属性的属性值，就可以达到目的。字 体属性共分五种：字族（font-family）、字体风格（font-style）、字体变形（font-variant）、字体加粗（f ont-weight）、字体大小（font-size），此外 font 属性是一个总体属性，可一一指定以上各种属性和属性值。
是不应该忽视的。
运用 Html，我们可以对字体的大小及字形进行简单的修改，但要进行统一地控制、创建特殊效果，就 必须要用到 css.它能让您更有效地控制网页外观，并可以扩充精确指定网页元素位置，外观以及创建特殊 效果的能力。考虑到用 frontpage 制作网页的人较多，同时它对其他网页编辑器的使用者也有一定的借鉴
BODY {FONT-SIZE: 9pt}
TH {FONT-SIZE: 9pt}
TD {FONT-SIZE: 9pt}
</style>
完成后即可见到效果。 如果要使一些网页应用相同的设置，就要使用外部样式表。首先在 frontpage 中新建一个样式表，具 体步骤是依次点击文件--新建--网页，在弹出窗口中点击样式表，并选择普通样式表。然后，键入以下代码：
完成以上步骤后，“网络化”这三个字就由普通字体变为加粗的字体。如果要修改为其他的字体，只要更换 代码中的字体属性以及属性值即可。
我曾在上面提到 font 属性是一个总体属性，并可以快捷地设置字体的所有属性。以下这个例子就是给 大家讲解如何给文字定义多种属性。我依然以“网络化”这三个字作为设置对象，只是这次将它改为 16 磅的 偏斜字体。设置的步骤与上面相似，但代码要改为：<span style="font: oblique 16pt ">网络化</span>
语法为：h1{font-style:属性值}
3、字体变形（font-variant） 功能：使文本中的小写字母显示为字体较小的大写字母，常用于设计特殊的标题。
属性值：normal（普通）和 small-caps（小型大写字母）
语法为：h1{font-variant:属性值}
4、字体加粗（font-weight） 功能：用于设置字体笔划的粗细。
它们的功能与属性值如下：
1、字族（font-family） 功能：通过 font-family 指定字体类型用于改变 HTML 标志或元素的字体，你可设置一个可用字体清单。
浏览器由前向后选用字体。
其语法为：h1 {font-family: 字体类型，字体类型，字体类型}
2、字体风格（font-style) 功能：使文本显示为扁斜体或斜体等?属性值：normal-普通、italic-斜体、oblique-偏斜体
如何用 css 设置网页字体 ‖·css 专题 2009-10-20 05:11 阅读 22 评论 0
字号： 大 中 小 在网页界面的设计过程中，许多人考虑最多的是用什么图形与色彩来装饰网页，或是在网页上加上什么动 画特效；而对于网页的字体却不太重视。结果往往是有些网站的字体不是太小就是太大，严重影响阅览;而 有的网站整页用的都是标准字体，毫无个性而言。其实，字体作为网站内容的载体，有其独特的重要性，
以上介绍的是如何在页面中对某些文字的字体进行设置，但如果要对整个或几个页面的字体进行设置 就要运用到以下的方法：
一、当只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在 网页的 <HEAD> 标记符内。嵌入的样式表中的样式只能在同一网页上使用。
二、当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外 部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果您决定更改样式， 您只需在外部样式表中作一次更改 ，则该更改就会反映到所有与该样式表相链接的网页上。通常外部样式
表以 .css 做为文件扩展名，例如 1.css。
下面就以如何把网页的所有文字设为流行的 9 磅字为例，给大家讲解如何运用以上两种方法。
如果只设置当前页面，就要运用嵌入的样式表，这时只需进入 html 编辑页面，在<head>与</head> 中加入以下代码：
<style type="text/css">
创造得更加完美。
举报 引用(0) 评论(0) 阅读(22)
上一篇：针对浏览器隐藏 CSS 之九大技巧
下一篇：CSS 样式表一席谈之绝对定位与相对定位 评论
点击登录 |昵称：
发
加博友 关注他
huage上万人看了都哭了】『有良知的话为了自己和孩子看完它』 Flash 实例教程：AS3 代码简单表现照片底片效果
完成后，这三个字就同时具有了两种属性。比较以下两副图就可以看出修改前后的不同。
在这里还需要说明的是虽然 frontpage2000 也可以更改字体的大小与字形，但它却不能像 css 这样精
确地控制字体，如 frontpage2000 就不能将字体大小设置为 16 磅。如果将以上的代码直接 copy 入 html 编辑页面中，就会使<>""这几个符号变为奇怪的字符，所以在应用中还是直接键入为好。