`
huanyq2008
  • 浏览: 171751 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

所有浏览器中都能正常显示的字体

阅读更多

很佩服国外一些前端开发人员对待学问的研究精神,他们很善于总结发现。看到一篇关于安全字体List of Web Safe Fonts的文章,里面总结了所有的安全字体的样式,当然都是英文的。

所谓安全字体,就是在所有的浏览器中都能正常显示的字体,也就是所有操作系统默认都安装了的字体。

 

共有22种安全字体:

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

FONT-FAMILY: Comic Sans MS, "宋体", Arial, Helvetica, sans-serif;

 

我们用一个页面形象的展示出来:(见附件demo.html)

 

 

 

IE7下截图:

 

 

 

以前常常在烦恼中英文混排的问题,英文字体一般都是选用亚洲字体或者Verdana字体,可在和中文混排的时候都不是很理想,偶然看到一篇淘宝兄弟的blog,他建议用Tahoma字体,而且发现淘宝网很快的改用了这种字体。从我上面的截图也可以看出,Tahoma字体在12px下中英文混排是看上去最舒服的。

 

 

 

 

 

 

  • 大小: 11.6 KB
  • 大小: 9.9 KB
  • 大小: 9.7 KB
  • 大小: 13.8 KB
  • 大小: 16.2 KB
分享到:
评论

相关推荐

    音标字体集 音标不能显示时可用

    然而,由于计算机标准字体通常不包含所有音标字符,因此在某些情况下,可能会出现音标显示为乱码或无法正常显示的问题。 当遇到音标不能显示的情况时,安装音标字体集就显得尤为重要。这些字体集包含了各种国际音标...

    浏览器 Json 格式化 高亮显示插件

    确保在使用前检查浏览器的版本兼容性,以确保插件能正常运行。 总之,对于处理大量JSON数据的开发者来说,选择合适的浏览器插件进行格式化和高亮显示是非常重要的。JSON-Handle和JSONView作为两款优秀的工具,提供...

    日历控件(浏览器兼容)

    - **渐进增强**:确保基本功能在所有浏览器中都可用,然后为支持更高级特性的浏览器添加额外的功能和样式。 - **响应式设计**:确保日历控件在不同屏幕尺寸和设备上都能良好显示,适应移动设备和桌面电脑。 在"Demo...

    各浏览器默认的css

    5. **渐进增强和优雅降级**:设计应考虑基础功能在所有浏览器中都能正常工作,然后为支持更高级特性的浏览器添加额外样式和功能。 6. **响应式设计**:考虑到不同设备和屏幕尺寸,使用媒体查询等技术使网站适应各种...

    网页在各种分辨率和浏览器中均可正常显示的方法

    确保网页在各种分辨率和浏览器中都能正常显示,能够提供一致的用户体验,从而提高用户满意度。本文将介绍一种方法来解决这个问题,主要关注HTML和CSS的适配策略。 首先,我们看到关键代码中的第一条: ```css ...

    下拉菜单效果,兼容各个主流浏览器

    "下拉菜单效果,兼容各个主流浏览器"这个主题聚焦于如何使用JavaScript技术来实现一个类似于HTML原生`<select>`标签的下拉菜单效果,并确保该效果在各种主流浏览器中都能正常工作。 首先,我们要理解`<select>`标签...

    网页设计特殊创意字体大全

    10. **跨浏览器兼容性**:确保所选字体在主流浏览器中都能正常显示,以免因浏览器兼容性问题影响用户体验。 总的来说,特殊创意字体在网页设计中起着至关重要的作用,它既能彰显设计风格,又能有效地传达信息。设计...

    字体转换工具

    至于`LocalFallback.ttf`,这可能是一个备用字体文件,当目标系统不支持转换后的`.eot`字体时,浏览器会回退使用这个`.ttf`字体,以保证在所有环境中都能正确显示文本。 总的来说,字体转换是网页开发中的一项重要...

    MathJax:在所有浏览器中都可以使用美观且易于访问的数学

    MathJax是适用于所有现代浏览器的LaTeX,MathML和AsciiMath表示法的开源JavaScript显示引擎。 它的设计目标是将Web技术的最新进展整合到一个支持主要浏览器和操作系统的单一,确定的网络数学平台。 它不需要用户...

    跨浏览器打印网页数据

    标题中的“跨浏览器打印网页数据”指的是在不同的网络浏览器中实现网页内容的打印功能,确保在各个主流浏览器(如Chrome...通过深入理解和熟练运用这些知识点,开发者可以创建出无论在哪种浏览器中都能完美打印的网页。

    amcharts fonts 字体文件夹

    1. **兼容性检查**:确保所使用的字体在所有目标浏览器和操作系统中都支持,避免因字体不兼容导致的显示问题。 2. **本地部署**:将字体文件放在服务器上,或者如上述描述,将其放在本地项目文件夹中,使得浏览器...

    MacOS使用的中文字体

    MacOS提供了Web安全字体,如“宋体”、“黑体”和“Arial”,这些字体在大多数系统中都能正确显示,减少了跨平台显示问题。 此外,MacOS的字体管理功能也相当强大。用户可以通过“字体册”进行字体的分类、搜索,...

    html5字体练习

    在这个练习中,提供了三种不同的字体,每种字体都有不同的格式(如.eot, .woff2, .woff, .ttf, .svg),以确保在各种浏览器中都能正确显示。`src`属性指定了字体文件的URL,`font-family`则定义了一个自定义的字体...

    js浏览器兼容问题的大全

    此外,确保图片、字体图标等资源在各种环境下都能正确显示也是关键。 最后,`浏览器差异对比表.html`可能是对不同浏览器功能和性能的详细比较,帮助开发者识别潜在的兼容性问题。对比表通常会列出关键特性、性能...

    CSS怎么调用外部特殊字体

    首先,需要获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体。这些格式包括 .TTF 或 .OTF、.EOT 和 .SVG。其中,.TTF 或 .OTF 适用于 Firefox 3.5、Safari、Opera;.EOT 适用于 Internet ...

    两款网页右下角消息提示框 兼容多个浏览器

    6. **兼容性**:确保在各种浏览器中都能正常显示和功能完整,这通常需要使用跨浏览器的CSS和JavaScript技术,如使用Bootstrap、jQuery等库来实现。 这两款提示框可能采用了不同的技术实现,如纯CSS、JavaScript或者...

    HTML 第八章 Table局部布局与浏览器兼容性

    因此,我们需要了解CSS hack和条件注释等技术,以确保在各种浏览器中都能正常显示。 6. **Firebug工具**:压缩包中的“firebug各版本”是Firefox浏览器的一个经典开发者工具,它允许用户查看和编辑网页的HTML、CSS...

    css在浏览器中的兼容性

    - **跨浏览器测试**:通过使用工具如BrowserStack、CrossBrowserTesting等进行跨浏览器测试,确保网站在不同浏览器中都能正常工作。 - **参考文档**:查阅官方文档或第三方资源,了解特定CSS属性在各个浏览器中的...

    纯CSS图片流畅缩放显示详情代码,鼠标移到图片上后图片会缩小,同时下方显示产品的文字描述,兼容主流浏览器

    为了确保这个功能在主流浏览器中都能正常工作,我们需要考虑浏览器兼容性。CSS3的`transform`和`:hover`伪类在现代浏览器中都得到了广泛支持,但老版本的Internet Explorer可能需要使用特定的前缀,如`-webkit-`、`-...

Global site tag (gtag.js) - Google Analytics