如何设置网页字体样式,网页文字样式设置方式
内容导航:html网页的字体怎么设置好看chrome可以设置忽略网页指定字体样式吗css字体设置。急求网页设计怎么设置同意字体格式样式一、html网页的字体怎么设置好看想用css设置字体样式,首先得了解css字体属性,css
字体属性可以定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。如下:font简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family设置字体系列。font-size设置字体的尺寸。font-size-adjust
当首选字体不可用时,对替换字体进行智能缩放。(css2.1已删除该属性。)font-stretch对字体进行水平拉伸。(css2.1已删除该属性。)
font-style设置字体风格。font-variant以小型大写字体或者正常字体显示文本。font-weight设置字体的粗细。
如果你希望文档使用一种字体可以这样body{font-family:sans-serif;}指定字体系列,如下,这样所有h1标签里面的字体就定义好了h1
{font-family:georgia;}其中他们优先级是h1>body注意:如果读者没有安装
georgia字体,会默认为其他字体,如果您对字体非常熟悉,也可以为给定的元素指定一系列类似的字体。要做到这一点,需要把这些字体按照优先顺序排列,然后用逗号进行连接:p
{font-family:times,timesnr,‘newcenturyschoolbook’,georgia,‘newyork’,
serif;}如果把一个font-family属性放在html的style属性中,则需要使用该属性本身未使用的那种引号如:
…
字体风格font-style属性最常用于规定斜体文本。该属性有三个值:?normal–文本正常显示?italic–文本斜体显示?oblique–
文本倾斜显示实例{font-style:normal;}{font-style:italic;}{font-
style:oblique;}字体变形font-variant
属性可以设定小型大写字母。小型大写字母不是一般的大写字母,也不是小写字母,这种字母采用不同大小的大写字母。实例p{font-variant:small-
caps;}字体加粗font-weight属性设置文本的粗细。使用bold关键字可以将文本设置为粗体。关键字100~900为字体指定了9
级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100对应最细的字体变形,900对应最粗的字体变形。数字400等价于
normal,而700等价于bold。如果将元素的加粗设置为bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词lighter
会导致浏览器将加粗度下移而不是上移。实例{font-weight:normal;}{font-weight:bold;}{font-
weight:900;}字体大小font-size属性设置文本的大小。有能力管理文本的大小在web
设计领域很重要。但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。请始终使用正确的html标题,比如使用
来标记段落。font-size
值可以是绝对或相对值。绝对值:?将文本设置为指定的大小?不允许用户在所有浏览器中改变文本大小(不利于可用性)?绝对大小在确定了输出的物理尺寸时很有用相对大小:?相对于周围的元素来设置大小?允许用户在浏览器改变文本大小注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是
16像素(16px=1em)。使用像素来设置字体大小通过像素设置文本大小,可以对文本大小进行完全控制:实例h1{font-size:60px;}h2
{font-size:40px;}p{font-size:14px;}
使用插件changefontfamilystyleextension网页自动呈现微软雅黑字体(win7系统)
查看原帖>>
三、css字体设置。急求答:楼上的倒是个方法,不过不建议用不常用的字体做网站。一些特殊字体可以用ps坐上去。
四、网页设计怎么设置同意字体格式样式一、文字样式设置的基本标签—
设置字体样式的基本标签是,被其包含的文本为样式作用区。在初学者的html代码编写中,容易被多重嵌套,如文本。还有一种情况是标签嵌套错位,如
文本
。为了规范代码的编写,避免不必要的错误,读者在初学时一定要谨慎。二、设置文字的颜色
color是标签的属性之一,用于设置文字颜色。在d:\web\目录下创建网页文件,命名为font_,编写代码如代码4.7所示。代码4.7
字体颜色的设置:font_浅红色文字:html学习的本质就是该是什么就用什么
深红色文字:html学习的本质就是该是什么就用什么
浅绿色文字:html学习的本质就是该是什么就用什么
深绿色文字:html学习的本质就是该是什么就用什么
浅蓝色文字:html学习的本质就是该是什么就用什么
深蓝色文字:html学习的本质就是该是什么就用什么
浅黄色文字:html学习的本质就是该是什么就用什么
深黄色文字:html学习的本质就是该是什么就用什么
浅青色文字:html学习的本质就是该是什么就用什么
深青色文字:html学习的本质就是该是什么就用什么
浅紫色文字:html学习的本质就是该是什么就用什么
深紫色文字:html学习的本质就是该是什么就用什么
不但可以从代码4.7中学到color属性在font标签中的用法,还可以熟悉各种颜色的表示方法。三、设置文字的尺寸
size也是标签的属性,用于设置文字大小。size的值为1-7,默认为3。我们可以size
属性值之前加上“+”、“-”字符,来指定相对于字号初始值的增量或减量。在d:\web\目录下创建网页文件,命名为font_,编写代码如代码4.8所示。
代码4.8字体尺寸的设置:font_size为1:html学习
size为2:html学习
size为3:html学习
size为4:html学习
size为5:html学习
size为6:html学习
size为7:html学习
可尝试在size值前面加上“+”、“-”字符,更灵活地设置文字尺寸。四、设置文字的字体
face也是标签的属性,用于设置文字字体(字型)。html网页中显示的字型从浏览端的系统中调用,所以为了保持字型一致,建议采用宋体,html页面也是默认采用宋体。在d:\web\目录下创建网页文件,命名为font_,编写代码如代码4.9所示。
代码4.9字体字型的设置:font_字型为宋体:沁园春·长沙-毛泽东
字型为楷体:沁园春·长沙-毛泽东
字型为黑体:沁园春·长沙-毛泽东
字型为隶书:沁园春·长沙-毛泽东五、使文字倾斜
用双标签可使被作用文字倾斜,达到特殊的效果,例如文章的日期。被称为强调标签,也是斜体,目前使用比标签更频繁,其编写方法如下:这是斜体文字
这也是斜体文字六、使文字加粗
用双标签可使被作用文字加粗,是文字更加醒目,例如文章的标题部分。被称为特别强调标签,也是文字加粗,目前使用比标签更频繁,其编写方法如下:
这是粗体文字这也是粗体文字七、给文字加下划线
用双标签可添加下划线到被作用文字。以下为文字倾斜、加粗和下划线的综合示例。在d:\web\目录下创建网页文件,命名为font_,编写代码如代码4.10所示。
代码4.10文字修饰的设置:font_斜体:沁园春·长沙-毛泽东
加粗体:沁园春·长沙-毛泽东
下划线:沁园春·长沙-毛泽东
斜体加粗体下划线:_沁园春·长沙-毛泽东_—注意:在多个标签包含同一块文字时,其包含顺序不能错位。八、多种标题样式的使用
网页的文章中,为了凸显标题的重要性,标题的样式比较特殊。html技术保护了一套针对标题的样式标签,分别为双标签
,文字尺寸从大到小代表不同级别的标题。标题标签有一个特点,独占一行、文字加粗、文字居中。这样,在设置标题的时候就很轻松了,并且可设多级标题。在d:\web\目录下创建网页文件,命名为font_,编写代码如代码4.11所示。
代码4.11标题的设置:font_
一些业内人士认为,长期垄断互联网搜索和广告市场谷歌可能会盛极而衰。…与此同时,谷歌近日推出的多项新计划,例如开放手机联盟、社交网站通用平台opensocial、以及可能投资数十亿美元竞购无线频段,也遭到了广泛的质疑。
将继续垄断搜索最近有一些文章称,如果出现更好的搜索引擎,人们会毫不犹豫地放弃谷歌。但是,即使真有更好的搜索引擎出现,谷歌仍然可以在一段时间内屹立不倒。…在这种情况下,网站速度往往会成为决定胜负的关键。
九、学会处理网页中的特殊字符
在html中,有一些字符有特殊含义,例如“<”和“>”是标签的左括号和右括号,而标签是控制html显示的,标签本身只能被浏览器解析,并不能在页面中显示。那么,该怎样在html中显示“<”和“>”呢?特殊符号
html代码特殊符号html代码<<?(商标符号)?>>?(注册符号)?“”(英文半角)”×ק§?(版权符号)(c)
在d:\web\目录下创建网页文件,命名为,编写代码如代码4.12所示。代码4.12特殊字符的设置:标签的显示方法:
引号的显示方法:”英文半角双引号”
商标的显示方法:?
注册符号的显示方法:?
版权符号的显示方法:(c)
显示§
显示×—说明:单独显示符号&必须用代码&。十、如何更方便地忽略浏览器对部分html的解析
如果在网页中作一个类似本书的html代码示例,恐怕得把所有的<和>转换成<和>,显得比较麻烦。html代码中的和可以轻松解决这个问题。
是单标签,它插入到html代码中时,其后面的所有html标签全部失效,即浏览器对后面所有的html标签不作解析,直接在页面上显示。
是双标签,它只使其包含的内容中的标签失效,的使用更为普遍。在d:\web\目录下创建网页文件,命名为,编写代码如代码4.13所示。代码4.13
忽略标签的设置:
独立寒秋,湘江北去,橘子洲头。
看万山红遍,层林尽染;
漫江碧透,百舸争流。
鹰击长空,鱼翔浅底,
万类霜天竞自由。
怅寥廓,问苍茫大地,谁主沉浮?
携来百侣曾游,
忆往昔峥嵘岁月稠。
恰同学少年,风华正茂;
书生意气,挥斥方遒。
指点江山,激扬文字,
粪土当年万户侯。
曾记否,到中流击水,浪遏飞舟!十一、其他文字修饰方法
为了满足不同领域的需要,html还有其他修饰文字的标签。比较常用的有上标格式标签和下标格式标签。某些场合甚至要用到删除效果,即可用html的中划线标签。—
上标格式标签为双标签,多用于数学指数的表示,比如某个数的平方或立方。—下标格式标签为双标签,多用于注释,以及数学的底数表示。—
中划线标签为双标签,多用于删除效果。在d:\web\目录下创建网页文件,命名为,编写代码如代码4.14所示。代码4.14其他修饰标签的设置:
沁园春长沙!
数学指数的表示:23=8、1002
沁园春长沙!
数学底数的表示:log381=4、log5125=3
删除效果:~~我被删除了~~