`
zlzyfpqianhao9951078
  • 浏览: 14001 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

CSS网页制作教程:网页中常用的web安全字体

 
阅读更多

 

11,  Tahoma
Tahoma是一个十分常见的无衬线字体,Tahoma和Verdana师出同为名设计师马修·卡特的作品,由微软在1999年推出,被采用为Windows 2000、Windows XP、Windows Server 2003等系统的默认字型。半肥猫觉得:它的字体结构和Verdana很相似,其字符间距较小,用来作为标题,效果好过Arial(Tahoma的大写I 和小写l比Arial容易识别),但如果作为正文,他的字号不能小于13PIX,否则很多笔画粘连到一起,不利于阅读。

 

CSS写法:font-family: Tahoma, Geneva, sans-serif;

12,  Courier
Courier是一个等宽字体的粗衬线字体,主要是依据打字机所打印出来的字型来设计。原来Courier New的字体是IBM公司在1950年代设计给打印机使用的字体,后来这个字型成为整个打字机制造业的标准。Courier New是Courier的变体,比Courier更具机械味道。

 

CSS写法:font-family: Courier, monospace;

13,  Lucida Sans Unicode
是一种OpenType型的无衬线字体 。1993年制作并随微软公司的Windows NT 3.1操作系统发布。有较大的x字高,具有很好的可读性,被广泛用于显示、出版等各种用途。
它支持Unicode2.0版本的基本字符,包括拉丁字母,希腊字母,西里尔字母,希伯来字母,以及国际音标字符。该字体是首个 Unicode代码的字体, 该字体从Windows 98开始一直作为系统预装字体发行。
后来发布的 Lucida Grande字体作为苹果公司Mac OS X系统的默认字体发布。
CSS写法:font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;

14, Lucida Console
同Lucida Sans Unicode类似。

 

CSS写法:font-family: 'Lucida Console', Monaco, monospace;

15,  Garamond
Garamond(加拉蒙德)是一类西文衬线字体的总称,自16世纪40年代开始至今,有很多家公司和很多设计师参与到Garamond字体设计,如: Adobe Garamond, Monotype Garamond, Sioncini Garamond,和 Stempel Garamond等等。半肥猫觉得:字体给人端庄典雅,有些古典的感觉,在博物馆和历史性悠久的项目中使用,应该可以获得不错的效果。

 

CSS写法:font-family: Garamond, serif;

16 ,  MS Sans Serif
微软系统自带字体。屏幕显示的像素字体。非衬线字体。

 

CSS写法:font-family: 'MS Sans Serif', Geneva, sans-serif;
17 ,  MS Serif
微软系统自带字体。屏幕显示的像素字体。衬线字体。
CSS写法:font-family: 'MS Serif', 'New York', sans-serif;

....................................................................

 

CSS写法:font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;

19, Symbol

 

CSS写法:font-family: Symbol, sans-serif;

20, Bookman Old Style

 

CSS写法:font-family: 'Bookman Old Style', serif;

本文参考了WEB安全字体,希望在Web编写过程中这些核心的Web字体能对你有用。

具体请点击:http://www.verydemo.com/demo_c104_i30107.html

分享到:
评论

相关推荐

    HTML+CSS+JavaScript网页制作案例教程(第2版)-教学大纲.zip

    总之,《HTML+CSS+JavaScript网页制作案例教程(第2版)》的教学大纲全面覆盖了网页制作的核心技术,旨在培养学生的创新思维和实际动手能力,为他们在互联网行业的职业生涯打下坚实的基础。通过深入学习和实践,学生...

    中华传统文化题材网页设计主题:基于HTML+CSS设计放飞青春梦想网页【学生网页设计作业源码】

    HTML+CSS+JS在网页设计中的应用 - **HTML(HyperText Markup Language)**:作为网页的基础骨架,HTML用于定义网页的内容结构,例如段落、标题、链接、图片、列表等。通过合理的标签使用,可以清晰地组织网页内容...

    HTML+DIV+CSS常用网页模板21-40

    4. **图标库和字体图标**:例如Font Awesome或Ionicons,它们将图标作为Web字体使用,允许自定义颜色和大小,且易于导入和使用。 5. **JavaScript集成**:虽然主要讨论HTML和CSS,但一些模板可能包含JavaScript代码...

    HTML5&CSS3网页制作:HTML5文本格式化标记.pptx

    HTML5是现代网页开发的标准,它极大地扩展了...在实际项目中,结合CSS3可以进一步定制这些文本的样式,如颜色、字体、对齐方式等,以达到理想的设计效果。在完成小任务时,应确保正确使用这些标记,以加深理解和掌握。

    HTML5&CSS3网页制作:HTML5特殊字符标记.pptx

    这些特殊字符在网页设计中起到重要作用,尤其是在需要精确控制文本输出和保持数据一致性的场景下。 特殊字符不是通过键盘可以直接打出来的,而是通过插入特定的字符代码来实现。这些代码通常由一个和号(&)开始,...

    《网页设计与制作项目教程(HTML+CSS+JavaScript)》PPT.zip

    在本《网页设计与制作项目教程(HTML+CSS+JavaScript)》中,我们将深入探讨这三个关键技术,它们构成了互联网上大部分动态和静态网页的基础。 HTML(HyperText Markup Language)是网页内容的结构框架。它是网页的...

    《网页设计与制作项目教程(HTML+CSS+JavaScript)》-配套源码.zip

    《网页设计与制作项目教程(HTML+CSS+JavaScript)》是一部综合性的教程,旨在帮助学习者深入理解和掌握网页设计的核心技术。本教程结合了HTML、CSS和JavaScript这三种关键技术,它们是构建现代网页的基石。 HTML...

    《HTML+CSS+JavaScript网页制作案例教程》_教学大纲.docx

    《HTML+CSS+JavaScript网页制作案例教程》是一门旨在教授学生如何制作网页的专业基础课程,适合计算机相关专业的学生。这门课程涵盖了从基础的HTML语言、CSS样式到JavaScript编程的全面知识,旨在让学生掌握网页设计...

    web前端网页制作课作业:甜甜圈蛋糕店(HTML+CSS+JavaScript)

    它可以控制网页中的文本内容(字体、大小、对齐方式等)、图片的外形(形状、尺寸、位置等)以及版面的布局外观显示样式。 - **JavaScript**:一种轻量级的编程语言,主要用来实现网页上的动态效果。例如响应用户的...

    制作一个简单HTML旅游网站(HTML+CSS+JS)无锡旅游网页设计与实现面.md

    JavaScript是一种常用的脚本语言,常用于添加动态交互功能到网页中。本项目中涉及到了以下JavaScript技术: - **轮播图**: 使用JavaScript实现自动轮换展示图片。通常会结合HTML的`<img>`标签和CSS动画实现。 - **...

    HTML+CSS简单漫画网页设计成品 蜡笔小新3页 大学生个人HTML网页制作作品

    本项目中,CSS用于控制网页的布局、颜色、字体大小等视觉特性。 - 示例: ```css .logo { font-size: 24px; color: #FFA500; } .nav li { display: inline; margin-right: 10px; } ``` #### 2. **Div+...

    用DIV+CSS技术制作个人博客网站(web前端网页制作课期末作业)

    - **DIV+CSS 布局**:这是一种流行的网页布局方式,通过 `<div>` 标签来划分网页的不同部分,并使用 CSS 来控制这些部分的样式和位置。这种方式使得网页的结构更加清晰,同时也提高了页面的灵活性和可维护性。 - **...

    WEB技术—网页制作实例教学

    在"网页制作实例教学.ppt"这个文件中,很可能是详尽的教程,它可能会涵盖以下知识点: 1. HTML基础:学习如何创建基本的HTML文档结构,包括头部、主体和尾部标签,以及如何插入文本、图像、链接等元素。 2. CSS...

    HTML+CSS大作业:众志成城 抗击疫情 抗击疫情网页制作作业 疫情防控网页设d

    - **CSS样式**: 通过CSS设置网页背景颜色、字体样式等,还提到了CSS实现了导航区域鼠标经过时的荧光效果,这是一种常见的CSS交互设计技巧。 - **JS特效**: 如定时切换和手动切换图片轮播等功能,这些动态效果的加入...

    html+css网页设计(静态网页)

    Dreamweaver是一款常用的可视化网页编辑工具,它支持直接编写HTML和CSS代码,同时也提供所见即所得的界面,方便初学者上手。PHPStudy则是一个集成的PHP开发环境,尽管在这个场景中主要用于网页设计,但PHP通常用于...

    49个网页模板(html+css)

    网页模板是设计和开发Web页面时常用的一种工具,它们提供了预设的布局、样式和功能,使得开发者可以快速构建一个美观且功能齐全的网站。"49个网页模板(html+css)"这个资源集合了49款不同设计风格的网页模板,每个...

    HTML CSS 个人网页

    CSS的布局方式有很多种,如传统的表格布局、流式布局、定位布局,以及现代Web开发常用的Flexbox(弹性盒模型)和Grid(网格布局)。在个人主页中,可能采用了CSS的盒模型来控制元素的大小和间距,使用浮动(float)...

    web课程设计网页制作、基于HTML+CSS大学校园班级网页设计

    - **DIV+CSS布局**:是一种常用的网页布局方法,通过将内容用`div`标签包裹,并利用CSS来定义这些`div`的样式和位置,从而实现灵活多变的页面布局。这种方式相比传统的表格布局更为高效和易于维护。 - **CSS布局技术...

    常用网站制作网页设计软件

    ### 常用网站制作网页设计软件概述 随着互联网技术的发展与普及,网站设计与制作已成为企业和个人展示自我、推广产品的重要手段之一。为了更好地帮助设计师们高效地完成网页设计与制作任务,市场上涌现出多种多样且...

Global site tag (gtag.js) - Google Analytics