web设计艺术字_web界面设计规范有哪些

㈠ web设计中怎样使用艺术字

插入→图片→艺术字

㈡如何制作icon-fontweb字体ttf

这里，以已经有了一个位图为例~灰色的，一个丑不拉几惊世骇俗的……额……丑图标。我们把它在AI里抠图来~填上一个红色~然后把红色的抠出来的新矢量图给复制下来。

新建一个画布，（好吧，画布啊窗口啊文件啊什么的，你爱怎么称呼都好，不要在意这些细节），这里要注意的是，如果你每
个icon的大小不一样，那你至少得保证你的SVG画布一样大才行，新建的画布就和你切图时用的统一尺寸一样，一个标准就好，把你所有的icon都放进这
个尺寸里，调节大小，它们变成字体就不会错。这里楼主需要46*46的，所以建了46*46的。

在新的画布里，粘贴出你刚才复制的新抠的矢量图~由于楼主的画布大小没有大变化，所以和之前步骤一中的图差不多，仔细看，可以看到，没有原来的底图了，只有我们同样丑不拉几的新抠的图标。

下面，我们给我们的图标填充成白色。为什么要白色？因为程序员使用icon-font的ttf文件时，他们的默认颜色
一般是黑色和白色，具体的色值、大小、阴影特效等一切，由于制作完成后是ttf，和他们的代码字体没有区别，所以他们会自己根据需要来随时灵活变动，而不
是跟你说“噢设计狮~给我一个红的~绿色的也来一个~黄的也来一个~”他们可以自己来处理，不需要为了这种小事情打扰你。所以，你只需要把它弄成白色的就
好啦~怕变色以后看不到它了么？点击视图中的轮廓，就可以看到它啦~注意，变成轮廓的时候，其实没有黑色边框的啦~只是为了让你能够看到它才显示的哟~

保存成SVG格式。保存以后，桌面上生成了一个看起来像是浏览器文件的东西，什么鬼？这是浏览器才能打开么？打开怎么
没东西？因为你是白色啦~看不到是很正常的~背景也是白色的嘛~哈哈哈……这个可以通过属性查看，它是SVG文档的格式。名字真的可以起这么随意么？当然
啦~在制作icon-font的页面里随时可以编辑起名字之类的啦~所以，不要在意这些细节，让我们飞快的进入下一步。

进入icomoon，来来来，先科普一下界面的使用啦，最主要的功能集中在下面的三个导航按钮哦~自己制作的矢量图，用中间的那个就好，左边的按钮里可以从它的网站上选择海量图标，右边的是生成按钮，得上传或者选择以后才能使用。

在icomoon中上传我们的图标。点击上传图标的按钮，就会打开文件夹，选择你存储的位置，选中刚才导出的那个
SVG图标文件就可以。放心，这并不是你上传给他们做资源~只是在线制作而已~并不需要你捐献自己的灵感~选择完以后，你会在icomoon上看到你的
SVG图标哟~是不是好神奇~别急呀~还有最后一两步啦~

选中你这个SVG文件，并点击右下角的生成按钮，选择以后，你的图标会被有黄色描边的白色圆角矩形笼罩，不怕，点右下角的生成按钮。这时候跳转到了新的页面，我的上传图片中，绿色框中是你的图片命名等信息，我随便乱搞的。你会看到下载按钮在刚才生成按钮的位置，来，果断按下载，完成我们的制作，大功告成。注意，这里需要看你上方的几个操作按钮是否为选择按钮，如果是红色的删除按钮，那意味着你现在的鼠标就是个删除器，点一下就会从网页上取消你的上传操作，将会需要重新上传。编辑按钮就可以在这里直接对你的图标进行命名和CSS使用时的命名了。

下载好了，在桌面有一个icomoon的压缩包，里面包含了所有的相关文件，怎么用？直接把这个压缩包或者解压后的文件夹发给你的程序员就好了，他会知道怎么用的。他不知道怎么用怎么办？打他呀！装X不打草稿！不会用还敢叫我们做！！咳咳咳……来来来，秀一下我们的成果。这个字体文件，你自己也是应该可以用的，只是是图形而已，可以自己根据爱好来研究~

㈢制作网页用什么字体好

Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的“克隆”，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常
Lucida Family: Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。
Verdana: 专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。
Tahoma: 也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。
Trebuchet MS: 为微软设计的一个humanist风格字体，个人觉得个性太过突出，用得不好会不搭。

Serif

Georgia: 基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。
Times: Times是为了报纸而设计的，特点是可以在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文，被骂得很惨之后换成了Georgia。

中文不熟，抛砖引玉：

中易宋体：Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。
微软雅黑：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。
华文细黑：Mac下的默认中文。
Droid Sans和衍生的WenQuanYi Microhei：Andriod中的中文，也是Linux绝大多数发行版本的默认中文，，当然也有用WenQuanyi Zenhei的，不过比较少了。

㈣如何制作自己的网页字体图标

从设计单独的图标开始，到把它们转化成@font-face格式以备嵌入，乃至授权给他人使用，整个过程中我们将仅使用免费软件和在线服务。感觉怎么样呢？你不必依托于任何深奥的知识就可以制作出一套成功的英文字体（包括字母和数字），而只需要眼睛来设计——你面对的可能是非常非常小的东西。

最终，你将会收获一个制作设计元素的过程（方法），它的意义远远在制作出简单的图标之上。

在我们继续之前，首先应该谈谈，究竟希望通过在设计中使用图标达到什么目的，又是什么使得一个图标比下一个更成功。先讲理论再讲应用。为了完成这个任务，我们必须思考图标作为符号学的一部分，所扮演的角色。

什么是优秀的图标？

符号学，从广义上来说就是研究符号系统，我们如何对它们的形成和维护做出贡献，它们亦因我们对世界的理解而受到影响。

不论何时，当你从“它象征着什么”—— 它向你的观众传达了什么信息，或者它唤起了他们什么概念——思考你的某一部分设计工作时，你就是以符号学家的角度来审视你的设计。符号学像其它语言学一样，的确可以覆盖一种语言，在一个网站上面，有很多东西不是通过文字表达出来的，例如颜色、字体、形状（图标）。每个人都应该注意的是，这些东西所表达的都含有一种很强的文化因素。在中国，红色可以表示好运气，而在很多西方国家，它却意味着危险。
术语“icon”在符号学中有一个特殊的意思。icon是一个神器，通过相似表达某事物。例如，一个标记地图位置的icon。它拥有一个类似真实的
地图标记的形状,因此它可以表示一个位置，反过来，真正的地图位置标记使人们想起各种有意义的概念。其中这些有抽象的概念，比如地点；也有不太抽象的概
念，比如这个位置可能在什么地方。

一些所谓的图标并不具有真正意义的代表性。无处不在的RSS图标，一个点和两个同心圆弧段，没有什么比它更像Really Simple
Syndication 了。构成RSS图标的形状通过单独约定具有象征意义，对此我们已经达成了共识。不过，一个RSS图标更适合被称为RSS标志。
现在，我希望我们已经确定了下面两项成功的网站icon需要遵循的准则：

要有与真实事物的相似点，例如，一个类似真实打印机的打印图标。

你的图标在符号系统中应该是一个熟悉的，可识别的标志。

字体图标日益受到欢迎

Icon字体，由于其提供了一种图标速记方式，长期以来被认为是一种加强型UI设计，它协助人们理解文本信息。Icon图像以毒品传播的速度在整个web设计社区流传，使用它可以使你的设计更加亮丽、吸引更多用户点击。

与图片相比，使用icon式字体是一个相对新的主意。然而，与图片（背景图片方式）相比，它具备很多固有的优势，因此它的吸引力正在逐渐增长。早在9月初，我在微博上写了它的一些好处，Chris Coyier显然也有类似的想法，几周之后也向更多观众介绍了它。基于以上两篇文章和其它内容，我编写了这个较为完整的特征列表：

它们的尺寸能够轻松调整，并且不会损坏图像质量（作为矢量图）；

给icon定义颜色和文本一样简单。例如，对于一个rss图标，color:orange；

可以把许多icons排列在一个组中，也就是一个文件中，这样只需要一次http请求就可以了;

正如Chris所指出的，它们在IE6中也可以借着透明性显示出形状（这一点与PNG图片不同）;

对于那些应该出现在文字附近的图标，对齐方式和包装都不是问题（因为它们是文本）;

你可以应用CSS3的text-shadow和background-clip:text效果，以便凸显字型的形状;

不像SVG，icon字体很容易实现跨浏览器兼容；

问题

Chris说过，使用icon字体是一个不错的主意，我要告诉你。

尽管如此，icon字体的使用现状并不理想。首先，一些优质的可用字体，如Pictos, Fico, Klepto, Cheetos, Ponyo 和 Sailor Moon都是收费的。实际上意味着真有两个问题：

你或许不得不投资一部分钱。

无论你是否需要花钱，你将会被迫接受其他一些人的糟糕设计。

除了自动抓取程序，我假定主要是网页设计师将会阅读这篇文章。我是一个设计师，我不认为只有我一个讨厌依靠别人的作品，使自己的设计思路大打折扣这
种事儿。当然，我更不喜欢那种有支付权限的想法。我知道自己要使用什么图标，并且我知道如何才能使其适合我的整体设计。我想要那种控制力。

经过一些搜索，我想介绍一下Inkscape的svg字体编辑器。通过使用Inkscape和一款在线转换器（SVG字体到TTF），我制作出了字体“Heyding”，这个字体在 Simurai’s list（由Coyier的文章链接到）中有介绍。我不打算将自己的字体卖给你（它是免费的），但是我想它会带给你一个非常好的概念。

使用Inkscape制作icon字型

启动Inkscape

我们先从下载和安装Inkscape开始。你也应该使用我的icon字体启动器模板，它们被放在这个GitHub仓库的资源文件夹里（以后这个项目中还会有更多）。一旦你在Inkscape中打开了这个文件，你应该通过在主菜单中打开以下窗口来设置好你的工作空间：

OBJECT → FILL AND STROKE

OBJECT → ALIGN AND DISTRIBUTE

TEXT → SVG FONT EDITOR
在SVG字体编辑面板中，点击“Font”下的“Font1”。现在，你的工作空间看起来应该有点儿像这个截图：

值得指出的是， baseline不是在画布的下边界之下：如果你希望与相邻的字体共享同一条基线，你的图标应该很轻微地悬在画布的底部。我已经用Georgia，Arial和一些网页字体进行了测试。

制作你的第一个字型

为定义字型，点击SVG字体编辑面板中的“Glyphs”选项卡，然后点击面板下方的“Add
Glyh”按钮。一开始你可能不太清楚，但如果你在你的字形（“字型1”）上点击，一个字段将会显示出来，它要求你输入你需要的图标对应的字符。我们首先
要做一个简单的星形，所以我建议你输入的字符“s”，“S”或“*”：

现在我们已经定义了字型对应的字符，我们需要制作字型本身。由于这次我们仅仅要制作一个星星，我们应该从Inkscape左边的工具栏中选择有用的
Stars and Polygons tool
，然后，在画布上绘制一个星星。你会发现，这个工具自带的选项允许您更改星星的外观。在我的例子中，选择了角数为5，spoke
ratio为0.5，rounded value为0.1。

使用Align and Distribute panel（可能在SVG Font Editor下面隐藏着）使星星横向居中，然后乡下拖动形状使触及基线。关闭网格显示之后，画布看起来应该像这样子：

在我们的icon字体中，字型只是形状，没有颜色、层级或者渐变的形状。因此，为了使我们的星星成为一个合格的字体候选者，我们必须将它由一个对象
转化成基于路径的图形。你可以通过在主按钮上选择星星，然后是PATH → OBJECT TO
PATH来完成这一任务。现在，选择了星星之后，我们可以在SVG Font Editor 中，高亮显示可用的“s”字型，然后点击 Get
curves from selection按钮：

当你在Sample Text 区域输入“s”时，你的星星应该被预览出来，如下所示：

制作更加复杂的icon

你已经制作出了第一个可扩展的SVG字体字型。通过使用Fill and
Stroke面板上的选项：编辑路径节点，以及合并对象和笔画，能够使你做出更加不凡的icon设计。由于我们还有很多要讲，我不想深入完成一个完整的
Inkscape教程，但是遵循下面的简单规则会给你带来好处：

坚持使用黑色笔画和填充，只是为了提醒你：那些icon仅仅是形状，而非复杂的矢量图。为icon上色这件工作，我们会在最终产品中使用CSS来完成。

所有对象和笔画（线条）必须被转化成路径（不管使用PATH → OBJECT TO PATH 或者 PATH → STROKE TO PATH）

当有多个对象和/或笔画被用来完成一个icon字型时，它们应该被合并起来（使用PATH → COMBINE 或者，在某些情况下，使用 PATH → UNION）

为了在已有的形状上剪切出想要的形状，将形状放置在主形状上面，选择两个形状，然后选择 PATH → DIFFERENCE。点击Get curves from selection ，黑色块上面的白色区域剔除之后就是你要的形状。

准备嵌入你的字体

假如你已经重复了很多次我刚才所描述的方法，创建了一些有用的图标，并且，字体文件被保存为myicons.svg。现在，你将要准备好把这个图标库用于网页中。

把SVG转化成TTF

你应该采取的第一项措施是，将SVG字体格式转换成一个更熟悉、更通用的格式。 TTF是一种用于本地安装的卓越格式。同时，它还为再转化成@font-face提供了一个良好的基础。可以进行字体转换的在线服务包括： http://onlinefontconverter.com，http://www.fontconverter.org和http://www.font2web.com。然而，我个人最喜欢的，是http://www.freefontconverter.com，因为我不会排队，也从来没看到它产生什么故障。

我想，不需要向你介绍如何使用这个资源也足以显示我的诚意了。醒目的文件上传字段，select元素和巨大的转换按钮会让你迅速抓住重点，真的。

编辑字体信息

既然你已经获得了一个TTF，我推荐你现在编辑产生的元数据。对字体进行重命名、添加属性和描述，使它准备好被安装、嵌入和分发。这也是一种声明字体为你所创造的途径。运行Windows的读者可以选择使用貌似很霸气的 Microsoft Font Properties Editor或者允许免费使用X天的Typograf。对于苹果和Linux用户，我希望得到你们更好的意见。

重要提示：虽然Microsoft Font Properties
Editor允许您添加作者，描述和许可信息，它似乎并没有让你编辑字体名称、附言名称等基本数据。这些字段是被禁用的。如果你想使用这些特殊的功能，你
需要在SVG转换为TTF之前，在SVG代码中编辑禁止的值。在你喜欢的文本编辑器（我用Notepad++）中打开原始的SVG，并编辑以下内容：

Font Name:标签中可以寻找到, font-family 属性

Postscript Name:标签中可以寻找到, id属性

Description:你应该在这个标签中添加一个描述（作者、许可等）。请注意这与TTF描述文字是不同的，转换过程中将不会被保留；你还需要为TTF添加单独的描述信息。

嵌入字体

一旦你在本地系统中安装了TTF，并且已经预览过，确定没有出现意外状况，你就可以在Font Squirrel的 @font-face generator中运行它了。为了使输出代码的效率和效果尽量好，这里有几个专家模式中的选项值得一提：

Subsetting：该选项允许您只运行需要的字符集（包括字符编码、类型、语言等选项），减少文件大小。

Remove kerning:您的图标将几乎总是单独出现，所以字距是没有必要的。据称，这也将减小文件大小。

WebOnly™:如果你希望您的字体仅仅用于web中，而非桌面- 你可以选择此选项。它也可以更好地满足您的授权计划。现在我将介绍许可证。

发布字体

如果你有兴趣发布你的字体，给它添加许可是一个比较好的做法。否则许多字体网站将不会带它玩儿。由于我们制作图标时使用的是免费、开源的软件，发布时也不妨这样做。

目前，有很多可用的授权选项，而逐一调查研究它们有时是令人费解的一件事。 GNU General Public License是完全可以接受的，但你可能要考虑SIL Open Font License。使用这种许可证的主要优点是，reserved font name：即允许其他设计师修改字体，但他们需要用不同的名字。在实践中，这意味着，对图标设计的一些不良行为不能以“你的名字”来进行。

有了这两种许可，你还应该在一个文本文件中保存版本信息，同时在字体的元信息中插入版权声明和完整许可的URL链接。如果需要更具体的说明，请访问各自的许可证页面（上面的链接）。

CSS spriting的终结者

为什么要停下使用SVG字体做通用图标的脚步？有了做图标的能力，也就有了能力去设计出站点独有的形状、品牌元素和装饰。这一点像CSS
sprities，所有这些视觉元素都可以保存在一个文件中，减少了服务器调用http请求的次数；不过，icon字体的元素都可以调整大小，而不必依赖
于位置坐标（背景位置值）才能正确显示。这使它们更适合于 responsive design。

让我们假装要选择使用一个SVG字体去代替一些我的steampunk般的blog里基本的设计元素。组件设计的一个简单的HTML表格呈现会是这个样子：

关于这种方式，最好的事情就是通用性。举例来说，从左边的第二个齿轮形状既可作为一个微小的圆点设计，又可以是一个巨大而抽象的背景装饰。着色很简
单：color:maroon，但没有必要坚持扁平的颜色;多种CSS3效果叠加起来可以为它添加纹理和触感。为了让你一开始有所启发，查看this excellent gallery of CSS3-enhanced webfonts。

关于屏幕阅读器的快速笔记

以这种方式使用字体来显示视觉元素的一个问题是，在屏幕阅读器上输出时会受到影响。直观上的网站访问者会看到齿轮，箭头之类的图标，但是屏幕阅读器将坚持读出指定这些设计的字符。对于使用装饰性的SVG字体元素，我建议听取Coyier的建议：为Unicode的Supplementary Private Use Area分配向量。这样的符号不应该由读者来读出。

一个协作式icon web字体

作为我的JavaScript导师，Rupert，有一天向我指出，使用SVG字体来创建图标集为合作提供了一个有趣的机会。你看，SVG的代码 - XML的一种形式 - 是高度标准化而且轻松可读的。正是源码的顺序让我觉得，icon字体的开发很适合选择像GitHub这样的协作编码服务。

这个想法契合了我想要的符号含义：如果一个图标是由很多人协商之后一致确定的，那么它的形成过程中也存在一定的“共识”。通过我们的图标标识系统设计出来的，一定是最典型的图标。我们应该创建一种属于社区的icon词汇，并且它对于需要的人来说是有意义的。

为了发展这个想法，我创建了一个公开的GitHub仓库Community Icon Font，这个仓库的文件结构并不复杂：仔细阅读上面的Inkscape教程和项目主页的内容应该可以为你解答所有的疑惑。如果你是GitHub的新成员，尝试阅读它们的帮助页面，或者问问你附近的技术人员（我正是这样做的）。

㈤网页设计怎么设置同意字体格式样式

一、文字样式设置的基本标签—
设置字体样式的基本标签是，被其包含的文本为样式作用区。在初学者的HTML代码编写中，容易被多重嵌套，如文本。还有一种情况是标签嵌套错位，如文本。为了规范代码的编写，避免不必要的错误，读者在初学时一定要谨慎。
二、设置文字的颜色
color是标签的属性之一，用于设置文字颜色。在D:web目录下创建网页文件，命名为font_color.htm，编写代码如代码4.7所示。
代码4.7 字体颜色的设置：font_color.htm
<html>
<head>
<title>字体颜色的设置</title>
</head>
<body>
浅红色文字：HTML学习的本质就是该是什么就用什么 
深红色文字：HTML学习的本质就是该是什么就用什么 
浅绿色文字：HTML学习的本质就是该是什么就用什么 
深绿色文字：HTML学习的本质就是该是什么就用什么 
浅蓝色文字：HTML学习的本质就是该是什么就用什么 
深蓝色文字：HTML学习的本质就是该是什么就用什么 
浅黄色文字：HTML学习的本质就是该是什么就用什么 
深黄色文字：HTML学习的本质就是该是什么就用什么 
浅青色文字：HTML学习的本质就是该是什么就用什么 
深青色文字：HTML学习的本质就是该是什么就用什么 
浅紫色文字：HTML学习的本质就是该是什么就用什么 
深紫色文字：HTML学习的本质就是该是什么就用什么 
</body>
</html>
不但可以从代码4.7中学到color属性在font标签中的用法，还可以熟悉各种颜色的表示方法。
三、设置文字的尺寸
size也是标签的属性，用于设置文字大小。size的值为1-7，默认为3。我们可以size 属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。在D:web目录下创建网页文件，命名为font_size.htm，编写代码如代码4.8所示。
代码4.8 字体尺寸的设置：font_size.htm
<html>
<head>
<title>字体尺寸的设置</title>
</head>
<body>
size为1：HTML学习 
size为2：HTML学习 
size为3：HTML学习 
size为4：HTML学习 
size为5：HTML学习 
size为6：HTML学习 
size为7：HTML学习 
</body>
</html>
可尝试在size值前面加上“＋”、“－”字符，更灵活地设置文字尺寸。
四、设置文字的字体
face也是标签的属性，用于设置文字字体（字型）。HTML网页中显示的字型从浏览端的系统中调用，所以为了保持字型一致，建议采用宋体，HTML页面也是默认采用宋体。在D:web目录下创建网页文件，命名为font_face.htm，编写代码如代码4.9所示。
代码4.9 字体字型的设置：font_face.htm
<html>
<head>
<title>字体字型的设置</title>
</head>
<body>
字型为宋体：沁园春·长沙-毛泽东 
字型为楷体：沁园春·长沙-毛泽东 
字型为黑体：沁园春·长沙-毛泽东 
字型为隶书：沁园春·长沙-毛泽东
</body>
</html>
五、使文字倾斜
用双标签可使被作用文字倾斜，达到特殊的效果，例如文章的日期。被称为强调标签，也是斜体，目前使用比标签更频繁，其编写方法如下：
这是斜体文字
这也是斜体文字
六、使文字加粗
用双标签可使被作用文字加粗，是文字更加醒目，例如文章的标题部分。被称为特别强调标签，也是文字加粗，目前使用比标签更频繁，其编写方法如下：
这是粗体文字
这也是粗体文字
七、给文字加下划线
用双标签可添加下划线到被作用文字。以下为文字倾斜、加粗和下划线的综合示例。在D:web目录下创建网页文件，命名为font_style.htm，编写代码如代码4.10所示。
代码4.10 文字修饰的设置：font_style.htm
<html>
<head>
<title>字体修饰的设置</title>
</head>
<body>
斜体：沁园春·长沙-毛泽东 
加粗体：沁园春·长沙-毛泽东 
下划线：沁园春·长沙-毛泽东 
斜体加粗体下划线：沁园春·长沙-毛泽东
</body>
</html>
— 注意：在多个标签包含同一块文字时，其包含顺序不能错位。
八、多种标题样式的使用
网页的文章中，为了凸显标题的重要性，标题的样式比较特殊。HTML技术保护了一套针对标题的样式标签，分别为双标签<h1>到<h6>，文字尺寸从大到小代表不同级别的标题。标题标签有一个特点，独占一行、文字加粗、文字居中。这样，在设置标题的时候就很轻松了，并且可设多级标题。在D:web目录下创建网页文件，命名为font_h.htm，编写代码如代码4.11所示。
代码4.11 标题的设置：font_h.htm
<html>
<head>
<title>标题的设置</title>
</head>
<body>
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>
<h5>五号标题</h5>
<h6>六号标题</h6>
<h1>财富杂志：谷歌为何不会盛极而衰</h1>
<h3>遭遇潜在问题</h3>
    一些业内人士认为，长期垄断互联网搜索和广告市场谷歌可能会盛极而衰。...与此同时，谷歌近日推出的多项新计划，例如开放手机联盟、社交网站通用平台OpenSocial、以及可能投资数十亿美元竞购无线频段，也遭到了广泛的质疑。
<h3>将继续垄断搜索</h3>
    最近有一些文章称，如果出现更好的搜索引擎，人们会毫不犹豫地放弃谷歌。但是，即使真有更好的搜索引擎出现，谷歌仍然可以在一段时间内屹立不倒。...在这种情况下，网站速度往往会成为决定胜负的关键。
</body>
</html>
九、学会处理网页中的特殊字符
在HTML中，有一些字符有特殊含义，例如“<”和“>”是标签的左括号和右括号，而标签是控制HTML显示的，标签本身只能被浏览器解析，并不能在页面中显示。那么，该怎样在HTML中显示“<”和“>”呢？
特殊符号
HTML代码
特殊符号
HTML代码
<
<
™（商标符号）
™
>
>
®（注册符号）
®
“”（英文半角）
"
×
×
§
§
©（版权符号）
&;
在D:web目录下创建网页文件，命名为string.htm，编写string.htm代码如代码4.12所示。
代码4.12 特殊字符的设置：string.htm
<html>
<head>
<title>特殊字符的设置</title>
</head>
<body>

标签的显示方法：<HTML> 
引号的显示方法："英文半角双引号" 
商标的显示方法：™ 
注册符号的显示方法：® 
版权符号的显示方法：&; 
显示§ 
显示×

</body>
</html>
— 说明：单独显示符号&必须用代码&。
十、如何更方便地忽略浏览器对部分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
<html>
<head>
<title>忽略标签的设置</title>
</head>
<body>
<h2>沁园春·长沙</h2>
<xmp>独立寒秋，湘江北去，橘子洲头。 看万山红遍，层林尽染； 漫江碧透，百舸争流。 </xmp>
鹰击长空，鱼翔浅底， 万类霜天竞自由。 怅寥廓，问苍茫大地，谁主沉浮？ 
<plaintext>
携来百侣曾游， 忆往昔峥嵘岁月稠。 恰同学少年，风华正茂； 书生意气，挥斥方遒。 指点江山，激扬文字， 粪土当年万户侯。 曾记否，到中流击水，浪遏飞舟！
</body>
</html>
十一、其他文字修饰方法
为了满足不同领域的需要，HTML还有其他修饰文字的标签。比较常用的有上标格式标签和下标格式标签。某些场合甚至要用到删除效果，即可用HTML的中划线标签。
— 上标格式标签为双标签，多用于数学指数的表示，比如某个数的平方或立方。
— 下标格式标签为双标签，多用于注释，以及数学的底数表示。
— 中划线标签为双标签<strike></strike>，多用于删除效果。
在D:web目录下创建网页文件，命名为other.htm，编写代码如代码4.14所示。
代码4.14 其他修饰标签的设置：other.htm
<html>
<head>
<title>其他修饰标签的设置</title>
</head>
<body>

沁园春长沙！ 
数学指数的表示：23=8、1002=10000 <hr />
沁园春长沙！ 
数学底数的表示：log381=4、log5125=3 <hr />
删除效果：<strike>我被删除了</strike>

</body>
</html>

㈥ web界面设计规范有哪些

一、网页尺寸
制作网页时，我们选用的分辨率是72像素/英寸，使用的画布尺寸1920px*1080px。
但是并不代表我们可以在整个画布上作图。
网页的布局主要有两种，左右型布局和居中型布局。布局的不一致，使得可设计的空间也不相同。
二、网页字体
字体设计的总原则是：可辨识性和易读性。
网页的文字设计是系统默认的字体：宋体、微软黑体、苹果系统黑体，英文则建议使用arial无衬线字体
常用的字号大小有以下几种：
12px是应用于网页的最小字体，适用于非突出性的日期，版权等注释性内容。
14px 则适用于非突出性的普通正文内容。
16px、18px或者20px 适用于突出性的标题内容。

㈦ 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, 'New Century Schoolbook',
Georgia, 'New York', serif;}
如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号如：
...
字体风格
font-style 属性最常用于规定斜体文本。
该属性有三个值：
•normal - 文本正常显示
•italic - 文本斜体显示
•oblique - 文本倾斜显示
实例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体变形
font-variant 属性可以设定小型大写字母。
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
实例
p {font-variant:small-caps;}
字体加粗
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
实例
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小
font-size 属性设置文本的大小。
有能力管理文本的大小在 web 设计领域很重要。但是，您不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。
请始终使用正确的 HTML 标题，比如使用 <h1> - <h6> 来标记标题，使用 来标记段落。
font-size 值可以是绝对或相对值。
绝对值：
•将文本设置为指定的大小
•不允许用户在所有浏览器中改变文本大小（不利于可用性）
•绝对大小在确定了输出的物理尺寸时很有用
相对大小：
•相对于周围的元素来设置大小
•允许用户在浏览器改变文本大小
注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。
使用像素来设置字体大小
通过像素设置文本大小，可以对文本大小进行完全控制：
实例
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

㈧ UI设计常用字体有哪

1.平平稳稳:微软雅黑/方正中黑
微软雅黑系列：在网页设计中这款字体使用的非常平凡，这款只无论是放大还是缩小，形体都非常的规整舒服。在设计过程中建议多使用雅黑，大标题用加粗字体，正文用常规字体。
方正正中黑系列：中黑系列的字体笔画比较锐利而浑厚，一般运用在标题文字中。但这种字体不适用于正文中，因为边缘相对比较的复杂，文字一多会影响用户的阅读。

㈨如何在webview中设置自定义字体

Web只是我们作为设计者和开发者所期待的一种理想化结果，开发成本低、轻松跨平台、迭代更新快，但是显然，现阶段用户的期待和手机设备厂商的期待还是体验上更胜一筹的Native。Web之于我们，只是一种趋势。在这个也许会非常久的过渡阶段，对复杂产品来说，Native App + Web App也许是个不错的解决方案。

web设计艺术字

与web设计艺术字相关的内容