运用HTML，我们可以对字体的大小及字形进行简单的修改，但要进行统一地控制、创建特殊效果，就必须要用到CSS.它能让您更有效地控制网页外观，并可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。考虑到用FrontPage制作网页的人较多，同时它对其他网页编辑器的使用者也有一定的借鉴作用，

　　因此，我就讲解一下如何在frontpage2000中运用css设置网页字体。

　　 我们可以用css设置出无数种网页字体，但万变不离其宗，任何的变化都要遵循css的基本语法。因此我们先来了解一下css的基本语法，它是这样子的：HTML 标志 { 标志属性：属性值；标志属性：属性值；标志属性：属性值；…… }。设置字体时，只要正确的更改字体属性的属性值，就可以达到目的。字体属性共分五种：字族（font-family）、字体风格（font-style）、字体变形（font-variant）、字体加粗（font-weight）、字体大小（font-size），此外font属性是一个总体属性，可一一指定以上各种属性和属性值。它们的功能与属性值如下：

　　1、字族（font-family）

　　功能：通过font-family指定字体类型用于改变HTML标志或元素的字体，你可设置一个可用字体清单。浏览器由前向后选用字体。

　　其语法为：h1 {font-family: 字体类型，字体类型，字体类型}

　　2、字体风格（font-style)

　　功能：使文本显示为扁斜体或斜体等?属性值：normal-普通、italic-斜体、oblique-偏斜体

　　语法为：h1{font-style:属性值}

　　3、字体变形（font-variant）

　　功能：使文本中的小写字母显示为字体较小的大写字母，常用于设计特殊的标题。

　　属性值：normal（普通）和small-caps（小型大写字母）

　　语法为：h1{font-variant:属性值}

　　4、字体加粗（font-weight）

　　功能：用于设置字体笔划的粗细。

　　属性值：正常度 - normal

　　相对度 - bold, bolder, light, lighter

　　渐变度 - 100, 200, 300, 400(相当于normal), 500, 600, 700(相当于 bold、 lighter、 bolder、以及数值100－900。

　　语法为：h1 < font-weight: 属性值>　

　　5、字体大小（font-size）

　　功能：改变字体大小。

　　属性值：长度 - 用毫米(mm)，厘米(cm)，英寸(in)，磅(pt)，象素(px)，pica(pc)，ex(小写字母x的高度)或em(字体高度)作为度量单位。

　　百分比 - 相对于其父元素字体大小的百分比。绝对尺寸分为xx-small, x-small, small, medium, large, x-large, xx-large七种，它们以各种字体的medium尺寸成比例缩放，每一级1.5倍。相对尺寸:有larger和smaller两种，根据字体原来的大小来决定缩放以后的大小。百分比：把字体设置成原来尺寸的百分比值，可以任意指定数值。

　　语法为：{font-size:属性值}

　　6、字体（font）

　　功能：简写属性，提供了对字体所有属性进行设置的快捷方法。

　　属性值：字体属性值为前面已列出的值，，内容的顺序为：font-style; font-variant; font-weight; font-size; line-height; font-family。可省略部分属性，属性值间用空格分开。

　　语法：{font:属性值1 属性值2 ...属性值n}

　　下面我就给大家举一个例子:把“网络化这三个字设置为加粗的字体首先在页面打入“网络化这三个字，由于字体的粗细是由“字体加粗这个属性决定的，所以在进入html编辑模式找到这些字后，就在它们的前后分别加上“字体加粗及其属性值的代码，如：<span style="font-weight: 700">网络化</span>

　　完成以上步骤后，“网络化这三个字就由普通字体变为加粗的字体。如果要修改为其他的字体，只要更换代码中的字体属性以及属性值即可。

　　我曾在上面提到font属性是一个总体属性，并可以快捷地设置字体的所有属性。以下这个例子就是给大家讲解如何给文字定义多种属性。我依然以“网络化这三个字作为设置对象，只是这次将它改为16磅的偏斜字体。设置的步骤与上面相似，但代码要改为：<span style="font: oblique 16pt ">网络化</span>

　　完成后，这三个字就同时具有了两种属性。比较以下两副图就可以看出修改前后的不同。

　　在这里还需要说明的是虽然frontpage2000也可以更改字体的大小与字形，但它却不能像css这样精确地控制字体，如frontpage2000就不能将字体大小设置为16磅。如果将以上的代码直接copy入html编辑页面中，就会使<>""这几个符号变为奇怪的字符，所以在应用中还是直接键入为好。

　　以上介绍的是如何在页面中对某些文字的字体进行设置，但如果要对整个或几个页面的字体进行设置就要运用到以下的方法：

　　一、当只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌在网页的 <HEAD> 标记符内。嵌入的样式表中的样式只能在同一网页上使用。

　　二、当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果您决定更改样式，您只需在外部样式表中作一次更改 ，则该更改就会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 1.css。

下面就以如何把网页的所有文字设为流行的9磅字为例，给大家讲解如何运用以上两种方法。

　　如果只设置当前页面，就要运用嵌入的样式表，这时只需进入html编辑页面，在<head>与</head>中加入以下代码：

<style type="text/css">

BODY {FONT-SIZE: 9pt}

TH {FONT-SIZE: 9pt}

TD {FONT-SIZE: 9pt}

</style>

　　完成后即可见到效果。

　　如果要使一些网页应用相同的设置，就要使用外部样式表。首先在frontpage中新建一个样式表，具体步骤是依次点击文件--新建--网页，在弹出窗口中点击样式表，并选择普通样式表。然后，键入以下代码：

BODY {FONT-SIZE: 9pt}

TH {FONT-SIZE: 9pt}

TD {FONT-SIZE: 9pt}

　　注意：如果直接拷贝进去，会产生多余代码。

　　将此文件保存在站点目录下。编辑网页时，点击格式--样式表链接，在弹出窗口中选择以上文件即可。

　　上面所讲述的仅仅是css的一些简单应用，只要你能够深入的了解css,并熟练的运用它，就能将你的网页创造得更加完美。

转载于:https://www.cnblogs.com/good10000/p/5997761.html

网页字体在Frontpage2000制作网页中的讲解相关推荐

  1. ps制作手机端网页字体大小_制作网页的最佳字体大小

    ps制作手机端网页字体大小 To make web content work, text on a page must be readable for all visitors. Following ...

  2. 如何制作网页2:如何学习制作网页

    很多人都想制作网页,但不知道如何制作网页,怎么制作网页,怎样制作网页,从哪里下手学习制作网页.其实如何制作网页这个问题不难,因为网站学习网会提供给你一切需求,如何制作网页系列教程将适合更多的零基础的朋 ...

  3. html css做网页总结,学习CSS制作网页总结的一些经验

    学习CSS制作网页总结的一些经验 互联网   发布时间:2008-10-17 19:28:20   作者:佚名   我要评论 让你使用DIV CSS排版 不是让你用换个标签然后再去按照表格的方式去排版 ...

  4. 设计网页字体css,CSS教程 :网页字体及字体大小的设计

    字体大小 CSS2规范根据长度--水平和垂直尺寸--来定义字体.这个长度为一个数值,前面可能带一个可选的加(+)或减(-)标记符.另外,该数值后可能有一个可选的单位标识符. 另外,CSS2规范定义了两 ...

  5. 利用html制作网页的小结,HTML_CSS制作网页的一些经验分享，CSS制作网页总结的一些经验 1: - phpStudy...

    CSS制作网页的一些经验分享 CSS制作网页总结的一些经验 1: ID用于标识页面单独元素以及持久行的结构性元素 方便JS的调用 类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形 ...

  6. ps转换html适应网页尺寸,【ps制作网页页面】ps图像如何生成html?如何将PS制作的网页效果图变成可用的网页?PC端UI设计尺寸规范?...

    [ps制作网页页面]ps图像如何生成html?如何将PS制作的网页效果图变成可用的网页?PC端UI设计尺寸规范?下面就和小编一起来看看吧! ps图像如何生成html? 事实上,ps有很多功能.你还羡慕 ...

  7. dreawever与php做网页,如何用dreamware制作网页

    如何用dreamware制作网页? 首先,在计算机C盘下创建一个"myweb2"文件夹,如下图所示: 然后打开Dreamweaver软件,如下图所示: 新建一个站点,命名为&quo ...

  8. python可以制作网页吗_自己制作网页的网站(python制作网页)

    制作网页的原则如果你想建立一个迷人而受欢迎的网站.在你开始设计网页之前,你应该考虑用户的需求.在网页的实际制作中,注意以下原则和建议,这将有助于制作出一个体面而有吸引力的网站. 首先,在制作前规划网站 ...

  9. html表格在网页底部,用表格制作网页

    你知道表格能做成网页吗?如果你知道,那你又知不知道怎么做呢?下面是小编为你整理的,希望对你有用! 利 实验目标 该网页将利用设计页面的布局,制楚雄师院的页面简介.通过该种制作,我们可以体会到表格在布局 ...

最新文章

  1. 2022-2028年中国工业环保产业投资分析及前景预测报告
  2. change python是什么意思_回溯是什么意思？
  3. 全站仪数据导入电脑_三鼎762R系列全站仪的SD卡传输教程
  4. matlab中size、length、cell的用法
  5. java dog类型_java泛型中?和T有什么区别？
  6. java中的this.id_Java this关键字
  7. Ulysses for Mac(最好用的纯文本编辑器)v22(65099)直装版
  8. SpringApplication run方法第四步解析（三）[（未完结，暂搁置）]
  9. ios 渐变透明背景_2019 - 渐变梯度
  10. 百度把黑科技发布会开到央视，主持人连连感叹：文科生都看懂了
  11. java有理数类的封装_java-有理数类的设计
  12. 2021年黄石二中高考成绩查询,2020年黄石二中2020届高考总结
  13. 2017东北四省赛G题
  14. c盘清理缓存垃圾路径
  15. PC项目——vue 脚手架中实现阿里云人机滑动验证
  16. 使用formality的技巧
  17. Mac上使用Emacs
  18. 黑人太管用计算机来打出来的音乐,求欧美黑人饶舌歌曲，节奏感要很强劲的那种。。。 （在百度上搜了，对味的只有少数）...
  19. WIN10使用内置Check Point Capsule
  20. [猿来小课]Python开发入门第三讲：Python的安装

热门文章

  1. BOE（京东方）柔性屏显示技术发展势头强劲，赋能应用场景创新
  2. 医惠护理系统服务器错误,医惠移动护理信息系统标准接口文档
  3. 浪潮服务器（NF5280M4）安装window server 2008R2系统
  4. python判断火车票座位_火车票买不到？看我用python监控票源
  5. 真实dom转换为虚拟dom的简单实现
  6. 神州信息出席2021中关村金融科技节并做主题演讲
  7. vue+elementUI实现日期快选组件
  8. Java判断闰年，统计1900年后闰年数
  9. 折腾记录，win11局域网文件夹共享
  10. 前端进阶_狂神Vue笔记_语法指令v-bind、v-on、v-for_表单双绑_组件_Axios异步通信_Vue的生命周期_计算属性_插槽 ＜slot＞_webpack使用_vue-router路由