【图文】宋体字_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
上传于||文档简介
&&关​于​字​体​设​计​的​课​件
大小：3.47MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢HTML网页各种字体格式的细节修饰
作者：佚名
字体：[ ] 来源：互联网 时间：04-02 20:55:33
本节从文字的细节修饰入手，使读者能把握HTML的各种字体格式的变化，制作出更为专业的网页。
4.2 文字的多样化修饰
上一节学习了大块段落的各种设置，对于文字本身修饰似乎更加吸引人。本节从文字的细节修饰入手，使读者能
本节从文字的细节修饰入手，使读者能把握HTML的各种字体格式的变化，制作出更为专业的网页。
4.2 文字的多样化修饰
上一节学习了大块段落的各种设置，对于文字本身修饰似乎更加吸引人。本节从文字的细节修饰入手，使读者能把握HTML的各种字体格式的变化，制作出更为专业的网页。
4.2.1 文字样式设置的基本标签&&font&
设置字体样式的基本标签是&font&&/font&，被其包含的文本为样式作用区。在初学者的HTML代码编写中，&font&&/font&容易被多重嵌套，如&font 属性1=值1&&font 属性2=值2&文本&/font&&/font&。还有一种情况是标签嵌套错位，如&font&&p&文本&/font&&/p&。为了规范代码的编写，避免不必要的错误，读者在初学时一定要谨慎。
4.2.2 设置文字的颜色
color是&font&&/font&标签的属性之一，用于设置文字颜色。在D:\web\目录下创建网页文件，命名为font_color.htm，编写代码如代码4.7所示。
代码4.7 字体颜色的设置：font_color.htm
&title&字体颜色的设置&/title&
浅红色文字：&font color=&#dd0000&&HTML学习的本质就是该是什么就用什么&/font&&br /&
深红色文字：&font color=&#660000&&HTML学习的本质就是该是什么就用什么&/font&&br /&
浅绿色文字：&font color=&#00dd00&&HTML学习的本质就是该是什么就用什么&/font&&br /&
深绿色文字：&font color=&#006600&&HTML学习的本质就是该是什么就用什么&/font&&br /&
浅蓝色文字：&font color=&#0000dd&&HTML学习的本质就是该是什么就用什么&/font&&br /&
深蓝色文字：&font color=&#000066&&HTML学习的本质就是该是什么就用什么&/font&&br /&
浅黄色文字：&font color=&#dddd00&&HTML学习的本质就是该是什么就用什么&/font&&br /&
深黄色文字：&font color=&#666600&&HTML学习的本质就是该是什么就用什么&/font&&br /&
浅青色文字：&font color=&#00dddd&&HTML学习的本质就是该是什么就用什么&/font&&br /&
深青色文字：&font color=&#006666&&HTML学习的本质就是该是什么就用什么&/font&&br /&
浅紫色文字：&font color=&#dd00dd&&HTML学习的本质就是该是什么就用什么&/font&&br /&
深紫色文字：&font color=&#660066&&HTML学习的本质就是该是什么就用什么&/font&&br /&
在浏览器地址栏输入http://localhost/font_color.htm，浏览效果如图4.7所示。
图4.7 字体颜色的设置
读者不但可以从代码4.7中学到color属性在font标签中的用法，还可以熟悉各种颜色的表示方法。
4.2.3 设置文字的尺寸
size也是&font&&/font&标签的属性，用于设置文字大小。size的值为1-7，默认为3。我们可以size 属性值之前加上&＋&、&－&字符，来指定相对于字号初始值的增量或减量。在D:\web\目录下创建网页文件，命名为font_size.htm，编写代码如代码4.8所示。
代码4.8 字体尺寸的设置：font_size.htm
&title&字体尺寸的设置&/title&
size为1：&font size=&1&&HTML学习&/font&&br /&
size为2：&font size=&2&&HTML学习&/font&&br /&
size为3：&font size=&3&&HTML学习&/font&&br /&
size为4：&font size=&4&&HTML学习&/font&&br /&
size为5：&font size=&5&&HTML学习&/font&&br /&
size为6：&font size=&6&&HTML学习&/font&&br /&
size为7：&font size=&7&&HTML学习&/font&&br /&
在浏览器地址栏输入http://localhost/font_size.htm，浏览效果如图4.8所示。
图4.8 字体尺寸的设置
读者可尝试在size值前面加上&＋&、&－&字符，更灵活地设置文字尺寸。
4.2.4 设置文字的字体
face也是&font&&/font&标签的属性，用于设置文字字体（字型）。HTML网页中显示的字型从浏览端的系统中调用，所以为了保持字型一致，建议采用宋体，HTML页面也是默认采用宋体。在D:\web\目录下创建网页文件，命名为font_face.htm，编写代码如代码4.9所示。
代码4.9 字体字型的设置：font_face.htm
&title&字体字型的设置&/title&
字型为宋体：&font size=&5&&沁园春&长沙-毛泽东&/font&&br /&
字型为楷体：&font size=&5&&沁园春&长沙-毛泽东&/font&&br /&
字型为黑体：&font size=&5&&沁园春&长沙-毛泽东&/font&&br /&
字型为隶书：&font size=&5&&沁园春&长沙-毛泽东&/font&
在浏览器地址栏输入http://localhost/font_face.htm，浏览效果如图4.9所示。
图4.9 字体字型的设置
笔者把被修改字型部分的文字尺寸设置为5号，方便读者查看。
4.2.5 使文字倾斜
用双标签&i&&/i&可使被作用文字倾斜，达到特殊的效果，例如文章的日期。&em&&/em&被称为强调标签，也是斜体，目前使用比&i&&/i&标签更频繁，其编写方法如下：
&i&这是斜体文字&/i&
&em&这也是斜体文字&/em&
4.2.6 使文字加粗
用双标签&b&&/b&可使被作用文字加粗，是文字更加醒目，例如文章的标题部分。&strong&&/strong&被称为特别强调标签，也是文字加粗，目前使用比&b&&/b&标签更频繁，其编写方法如下：
&b&这是粗体文字&/b&
&strong&这也是粗体文字&/strong&
4.2.7 给文字加下划线
用双标签&u&&/u&可添加下划线到被作用文字。以下为文字倾斜、加粗和下划线的综合示例。在D:\web\目录下创建网页文件，命名为font_style.htm，编写代码如代码4.10所示。
代码4.10 文字修饰的设置：font_style.htm
&title&字体修饰的设置&/title&
&font size=&5&&斜体：&em&沁园春&长沙-毛泽东&/em&&br /&
加粗体：&strong&沁园春&长沙-毛泽东&/strong&&br /&
下划线：&u&沁园春&长沙-毛泽东&/u&&br /&
斜体 加粗体 下划线：&em&&strong&&u&沁园春&长沙-毛泽东&/u&&/strong&&/em&&/font&
在浏览器地址栏输入http://localhost/font_style.htm，浏览效果如图4.10所示。
图4.10 字体修饰的设置
笔者把&body&&/body&内的所有文字尺寸设置为5号，方便读者查看。
& 注意：在多个标签包含同一块文字时，其包含顺序不能错位。
4.2.8 多种标题样式的使用
网页的文章中，为了凸显标题的重要性，标题的样式比较特殊。HTML技术保护了一套针对标题的样式标签，分别为双标签&h1&到&h6&，文字尺寸从大到小代表不同级别的标题。标题标签有一个特点，独占一行、文字加粗、文字居中。这样，在设置标题的时候就很轻松了，并且可设多级标题。在D:\web\目录下创建网页文件，命名为font_h.htm，编写代码如代码4.11所示。
代码4.11 标题的设置：font_h.htm
&title&标题的设置&/title&
&h1&一号标题&/h1&
&h2&二号标题&/h2&
&h3&三号标题&/h3&
&h4&四号标题&/h4&
&h5&五号标题&/h5&
&h6&六号标题&/h6&
&h1&财富杂志：谷歌为何不会盛极而衰&/h1&
　　　&h3&遭遇潜在问题&/h3&
　　&p&&&&&一些业内人士认为，长期垄断互联网搜索和广告市场谷歌可能会盛极而衰。...与此同时，谷歌近日推出的多项新计划，例如开放手机联盟、社交网站通用平台OpenSocial、以及可能投资数十亿美元竞购无线频段，也遭到了广泛的质疑。
　　&h3&将继续垄断搜索&/h3&
　　&p&&&&&最近有一些文章称，如果出现更好的搜索引擎，人们会毫不犹豫地放弃谷歌。但是，即使真有更好的搜索引擎出现，谷歌仍然可以在一段时间内屹立不倒。...在这种情况下，网站速度往往会成为决定胜负的关键。&/p&
在浏览器地址栏输入http://localhost/font_h.htm，浏览效果如图4.11所示。
图4.11 标题的设置
4.2.9 学会处理网页中的特殊字符
在HTML中，有一些字符有特殊含义，例如&&&和&&&是标签的左括号和右括号，而标签是控制HTML显示的，标签本身只能被浏览器解析，并不能在页面中显示。那么，该怎样在HTML中显示&&&和&&&呢？HTML规定了一些特殊字符的写法，以便在网页中显示，如表4.1所示。
表4.1 HTML中的特殊字符
&（商标符号）
&（注册符号）
&&（英文半角）
&（版权符号）
在D:\web\目录下创建网页文件，命名为string.htm，编写string.htm代码如代码4.12所示。
代码4.12 特殊字符的设置：string.htm
&title&特殊字符的设置&/title&
&font size=&5&&
标签的显示方法：&HTML&&br /&
引号的显示方法：&英文半角双引号&&br /&
商标的显示方法：&&br /&
注册符号的显示方法：&&br /&
版权符号的显示方法：&&br /&
显示&&br /&
在浏览器地址栏输入http://localhost/string.htm，浏览效果如图4.12所示。
图4.12 特殊字符的设置
& 说明：单独显示符号&必须用代码&。
4.2.10 如何更方便地忽略浏览器对部分HTML的解析
如果在网页中作一个类似本书的HTML代码示例，恐怕得把所有的&和&转换成&和&，显得比较麻烦。HTML代码中的&plaintext&和&xmp&&/xmp&可以轻松解决这个问题。
&plaintext&是单标签，它插入到HTML代码中时，其后面的所有HTML标签全部失效，即浏览器对&plaintext&后面所有的HTML标签不作解析，直接在页面上显示。
&xmp&&/xmp&是双标签，它只使其包含的内容中的标签失效，&xmp&&/xmp&的使用更为普遍。在D:\web\目录下创建网页文件，命名为html.htm，编写代码如代码4.13所示。
代码4.13 忽略标签的设置：html.htm
&title&忽略标签的设置&/title&
&h2&沁园春&长沙&/h2&
&xmp&独立寒秋，&strong&湘江北去&/strong&，橘子洲头。 &br /&看万山红遍，层林尽染； &br /&漫江碧透，&u&百舸争流。&/u& &br /&&/xmp&
鹰击长空，&strong&鱼翔浅底，&/strong& &br /&万类霜天竞自由。 &br /&怅寥廓，&u&问苍茫大地&/u&，谁主沉浮？&br /&
&plaintext&
携来百侣曾游，&br /&忆往昔峥嵘岁月稠。 &br /& 恰同学少年，风华正茂； &br /& 书生意气，挥斥方遒。 &br /& 指点江山，激扬文字， &br /& 粪土当年万户侯。 &br /& 曾记否，&strong&到中流击水&/strong&，浪遏飞舟！
在浏览器地址栏输入http://localhost/string.htm，浏览效果如图4.13所示。
图4.13 忽略标签的设置
4.2.11 其他文字修饰方法
为了满足不同领域的需要，HTML还有其他修饰文字的标签。比较常用的有上标格式标签和下标格式标签。某些场合甚至要用到删除效果，即可用HTML的中划线标签。
& 上标格式标签为双标签&sup&&/sup&，多用于数学指数的表示，比如某个数的平方或立方。
& 下标格式标签为双标签&sub&&/sub&，多用于注释，以及数学的底数表示。
& 中划线标签为双标签&strike&&/strike&，多用于删除效果。
在D:\web\目录下创建网页文件，命名为other.htm，编写代码如代码4.14所示。
代码4.14 其他修饰标签的设置：other.htm
&title&其他修饰标签的设置&/title&
&font size=&5&&
沁园春&sup&长沙&/sup&！&br /&
数学指数的表示：2&sup&3&/sup&=8、100&sup&2&/sup&=10000&br /&&hr /&
沁园春&sub&长沙&/sub&！&br /&
数学底数的表示：log&sub&3&/sub&81=4、log&sub&5&/sub&125=3&br /&&hr /&
删除效果：&strike&我被删除了&/strike&
在浏览器地址栏输入http://localhost/other.htm，浏览效果如图4.14所示。
图4.14 其他修饰标签的设置
大家感兴趣的内容
12345678910
最近更新的内容宋体横笔尾部的三角形，中文字体设计术语里面怎么说？
宋体横笔尾部的三角形，中文字体设计术语里面怎么说？
日文叫法「ウロコ」，既「鱼鳞」之意也 ；想问一下宋体横比划尾部的三角形叫什么【知乎用户的回答(7票)】:既然豆瓣小组哪些人也没讨论出来……我只敢说是参考资料了……翻了下手头的书籍：重要期刊里：《装饰》2007年第12期里有篇文章叫做《英文字母衬线与汉字字角的比较分析》不过搜出来好像几乎没人用字角这说法的……可能是脚写成了角另外在其他论文里见到的一些说法有：《宋体字的造型结构特征探析》里说汉字的衬线「传统上叫装饰角或字脚」，这论文里大多数情况下还是直接用「衬线」这个说法了字脚和装饰角，搜出来的结果都还好，貌似比较靠谱《论宋体字的形成与特征》里是「装饰角」其他：《实用美术字基础知识》里说是「顿角」大多数略老的美术字里没有对其称呼，只说「略似三角形的xx」……wiki里说译为「字脚」综上的话，似乎大陆没有个特别统一说法。又去问了下港台是怎么称呼的。台湾的justfont编辑说一般就叫衬线，香港的 说不翻译直接叫serif，因为襯線在粵語感覺怪怪，也沒有太大必要翻譯【东凯的回答(0票)】:在台灣翻譯的日本作品「文字的準則2」中譯為「鱗」，台灣是這麼稱呼的。大陸未曾在普通書店見到字體設計類的書也無從考證。【匿名用户的回答(0票)】:衬线 serif么不就是。。。。不过初中的时候老师管它叫 装饰角【禾呈的回答(0票)】:小时哈学钢笔字，老师说＂横折勾＂原文地址:
发表评论：
馆藏&53213
TA的推荐TA的最新馆藏字的创意设计
您现在的位置：&&>>&&>>&&>>&&>>&正文
字的创意设计
作者：佚名 教案来源：网络 点击数： &&&
字的创意设计
文 章来源莲山 课件 w ww.5 Y
字的创意设计&一、目标&&& 1.了解字体装饰艺术的特点，学习字体设计方法，能从汉字的义、形和结构特征出发，对汉字的笔画和结构作合理的联想和变形，创意出美观形象的美术字。&&& 2.从设计和创意美术字的过程中，发展学生的形象思维，使学生充分体会美术与自己的学习、生活息息相关。学习用美术语言表达思想，提高审美文化素养。3.了解中国古老汉字的历史及构成，感受汉字的奥妙和艺术魅力。增进学生对祖国优秀传统文化的理解和热爱，激发爱国主义热情。二、重点、难点。&&& 重点：了解汉字的历史，掌握美术字体艺术设计的基本知识、技巧、方法。&&& 难点：字体设计的创意。对学生分析能力、应变能力和形象思维能力的培养，使他们能抓住字义、字形、结构等汉字基本特征，灵活、合理地进行变体，使原字体变得更形象、美观、活泼，达到创新的目的。&&& ●方案&&& 第一课时&&& 课前准备&&& (学生)收集各种商标、广告、印刷品中的美术字，尺子，蜡笔或水彩笔&&& (教师)课件，教学录像《三十六个字》，范作，商标、广告、印刷品中的美术字图片&&& 教学过程&&& 1.欣赏导入，揭示课题。&&& （1）出示多种字体的同一组美术字，认一认、说一说这些是什么字？激发学生的学习兴趣。&&& （2）小结：美术字是经过艺术加工的一种字体，具有美观醒目的特点，我们在书刊、广告、包装等方面都能看到，如果我们每位同学都能写出一手漂亮的美术字，那该多棒啊！&&& （3）揭题：《字的创意设计》。&&& 2.了解文字历史，感受传统文化。&&& （1）出示一个象形文字，说说这个字在古代是怎么写的？（ 如：日、月、山、水、草、木、鱼、牛、鸟等字。）&&& 日　月　水　 牛 &&& （2）了解这个文字的变化过程。&&& （3）观看动画片《三十六个字》。&&& （4）说说观后感。&&& 3.欣赏评述，小组研究。&&& （1）欣赏、了解常见的美术字字体。&&& 认识宋体美术字以及它的三种变形――老宋体、仿宋体和新宋体。&&& 认识黑体美术字。&&& 认识变体字。（教师用电脑演示不同字体格式的变化）&&& （2）认一认，找一找美术书、语文书、报刊杂志中的各种字体。&&& （3）研究宋体字和黑体字的特点。&&& （4）仔细欣赏和放大字体，比较宋体字和黑体字的区别，&&& 研究这两种字的特点。&&& 4. 抓住特征，审美体验。&&& （1）结构分析：平衡稳定；布白匀称；穿插变化。&&& （2）特征分析：字形方正；横平坚直；大小统一；四边靠壁。&&& （3）了解基本笔画的特点。&&& “点入水滴撇似刀，横窄竖宽捺如扫，左钩右钩鹅进食，横到尽时有三角。” &&& ――宋体&&& “横平竖直，笔画等粗，粗壮有力，庄重醒目，结构均匀，方头方尾。”&&& ――黑体&&& （4）感受宋体和黑体字的美及其特点。&&& 5.作业练习，展评修改。&&& （1）分别用“黑体”和“宋体”书写“永”字。&&& 永 永&&& 根据字数多少确定字体大小，并划好字格。&&& 分析字的结构、笔画，并合理安排布局。（左右、上下、里外、半封闭结构等。）&&& 轻轻勾出字的单线结构，用笔要轻。&&& 笔画统一，以双勾字形法画出笔画。&&& 修整细节。&&& 选择颜色进行填色，填色一般先画轮廓，再在中间填色。&&& （2）学生作业，教师巡视指导。&&& （3）展评：对照“笔画形状是否统一，结构是否稳妥，文字在格内是否满格，大小一致”的要点，共同评议优劣。&&& 6.课后延伸，拓展研究。&&& 收集各种商标、广告、印刷品中的美术字。&&& &&& 第二课时&&& 课前准备&&& （学生）收集各种商标、广告、印刷品中的美术字，尺子，蜡笔或水彩笔&&& （教师）课件，范作，收集古今中外的各种装饰性美术字、各种商标、广告、印刷品中的美术字图片&&& 教学过程&&& 1.组织教学，导入课题。&&& 欣赏各种现代美术字，认一认这些是什么字？请学生在黑板上书写“艺”字，直接导入课题。&&& 2.欣赏评述，博古通今。&&& 欣赏中国古代的美术字（如:鸟书、蝌蚪文、凤尾书、芝英篆、金剪书等中国古代美术字。）、数字和英文美术字。（主要为英文字体的设计。）&&& 3.研究创意，启发思维。&&& （1）讨论“艺”和四川电视台台标“四”字书写特点及规律，介绍笔画的变形。&&& （2）欣赏一组变体美术字，说一说这些字的“创意”在哪里？找出其特点：&&& ①笔画变化。&&& 欣赏书中范字，提问：“衣”字主要抓住了哪一笔画的变化？&&& 有几何形体变化，如：圆形、方形、三角形…… &&& 有形象化处理，如：变点为花朵形、草形、蝴蝶形……&&& 笔画相连：平连、竖连、斜连；&&& ②结构变化。&&& 有意识地将某些笔画进行夸大、缩小、移位来获得新颖的效果。可以一笔破框，两笔破框；改变框形：变成圆形、拱形、扇形、平行四边形……&&& ③字形变化：改变字体的外形，可以是整个字的几何形体变化，如：圆形、梯形、平形四边形等。 &&& ④立体变化：平行透视、成角透视……聚光、成角、凹凸等，画出字的三维空间感。&&& ⑤形象变化：以字义出发，将整个字作形象化处理。&&& 木：变体后绘成四截木料叠成。&&& 冰天雪地：变体后绘冰纹，画上积雪。&&& 尖：变体成上部小下部大。&&& 曲：变体成曲线状。&&& ……&&& ⑥装饰变化：肌理、渐变、字内装饰、字外装饰。&&& ⑦光影变化：叠影、明暗、倒影、投影等。&&& 总结：变体美术字变化的方法无论多么丰富，都要表现出整体和谐、统一、完美的艺术特点。&&& 4.创意设计，作业练习。&&& （1）设计自己的名字或寻找合适的字、词，设计有创意的字体。&&& （2）要求：写出设计意图，即创意。&&& 5.作业欣赏，开拓思维。&&& （1）作业展评，小结。&&& （2）收藏、保存同学的作品。&&& &&& 第三课时&&& 课前准备&&& （学生）尺子，蜡笔或水彩笔等工具&&& （教师）课件，范作，各种商标、广告、印刷品中的美术字图片&&& 教学过程&&& 1.欣赏学生作品，复习导入。&&& （1）欣赏学生的作业，讲评新颖生动的创意设计作品。&&& （2）提问：你认为字形创意设计的作用是什么？字的创意设计可以应用在哪些地方？&&& （3）小结。&&& 2.欣赏招贴商标，创意剖析。&&& （1）了解著名文字商标、招贴的创作设计过程。&&& （2）请上节课完成优秀作业的学生介绍创作经过。&&& （3）欣赏、讨论经典文字商标的创意及招牌的创意。&&& （4）课件动画演示变体美术字。&&& 3.选择创意形式，表现创造。&&& （1）确定设计内容。（如：广告语，商标，招牌，版报题头、题花等。）&&& （2）寻找内容的个性特征。&&& （3）选择合适的材料及表现形式。&&& （4）对初步选定的文字，结合内容从各种角度，不同的构成形式、变化形式，按一定的构成法则进行揣摩、构思。&&& （5）草图表现，修改定稿。&&& 作业练习：设计一个报头或题花。&&& 4.学生创作表现，个别辅导。&&& 学生作业设计开始，进行针对性指导；对好的、有新意的设计进行表扬，以此来启发其他同学。&&& 5.师生共同评价，深入体会。&&& （1）自己评：介绍作品的创作过程。&&& （2）小组评、集体评和教师评相结合。&&& 6.提供主题，拓展思路。&&& （1）了解和关注电视、影片中的动画文字创意设计。&&& （2）保存学生作品。布置下一节课的准备工作。文 章来源莲山 课件 w ww.5 Y
没有相关教案上一篇教案： 下一篇教案：
? ? ? ? ? ? ? ? ? ?