[note]浏览器兼容性（<embed>标签、字体兼容相关

最新推荐文章于 2023-11-03 11:11:51 发布

weixin_34319817

最新推荐文章于 2023-11-03 11:11:51 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/sikou/blog/485394

本文深入分析了嵌入标签在不同浏览器（如Chrome、IE10和Opera）上的表现差异，包括字体设置、背景音乐播放等元素，并提供了在IE10中实现自定义字体的有效解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么80%的码农都做不了架构师？>>>

<embed>标签

在做一个网页的时候，一直都用chrome测试效果，后来用opera和IE10看了一下……

用html5的embed标签加了背景音乐

<embed src="ChianoSky - Walking Away.mp3" hidden="true" autostart="true" loop="true"/>

chrome完美支持，IE限制了，允许也可以自动播放

opera不支持，只能针对opera可视化标签让用户主动播放

font-family

然后是设置了<a>的字体

a{
	font-family : fantasy,黑体;
	padding: 3rem;
        margin: 3rem;
        float: right;
	color : #FF5809;
	font-size: 40pt;
	text-decoration: none;
    }

〈在Chrome和Opera中……

〈在IE 1 0中……

看着IE我好醉

我、好、醉

查看了一下浏览器字体

上面是IE10的，opera和chrome的自定义字体界面简直雌雄难辨……

设置感觉差不多？IE就是简单了些，

把黑体换成SimHei，没用，改成宋体，没用，那这样来说应该是编码的问题了。不过<meta>标签charset=utf8也声明了，文件保存编码应该也没错……………………………………………………然后随便看了一个网页的头部，发现别人是charset=UTF-8

改了果然好使了（- -|||）不过英文部分依旧不支持fantasy的样子

sans-serif

在许多css中可以看到font-family中最后跟地有sans-serif【无衬线字体】

无衬线与有衬线〈左：无衬线右：serif有衬线

segmentfault中看到了一个很关于不同浏览器中显示字体不同的解释

sans-serif与serif都属于Generic-family，是属于font-family的一类值，

它只有五种可能：serif、sans-serif、monospace、cursive、fantasy，用于表示一类字体。由于它的优先级高，覆盖面广，一般会写在最后，用作最终的Fallback的选择。

答案中还有一个关于字体很棒的slide

转载于:https://my.oschina.net/sikou/blog/485394