mark标签有什么用？文本高亮怎么实现？

说实话，mark标签这玩意儿我当年刚接触HTML5 时挺懵的，但用多了才发现它真挺有意思的。
记得第一次在博客里用的时候，就是想突出搜索到的关键词，结果直接套用默认的黄色背景，当时我还琢磨半天能不能改颜色——后来才知道CSS随便调。

这块我没亲自跑过，但数据我记得是大概在2 01 8 年前后，mark标签才开始在主流浏览器里稳定支持。
当时有个项目用得特别多，就是搜索结果页，把用户搜的关键词用包起来，默认的黄色背景立马就能让人注意到。
不过有意思的是，后来有些浏览器开始偷偷把mark的默认色调淡了点，可能怕太显眼刺眼吧。

说白了，mark标签的好处就是语义清晰。
我之前有次帮同事改文档，他硬是用span加背景色做高亮，结果搜索引擎爬虫直接把那段标黄文字当重点抓了，最后还得返工。
现在我们团队内推文档规范时，都会明确说搜索关键词必须用mark。

用CSS实现高亮当然更灵活，这点我深有体会。
比如做代码高亮时，纯粹靠背景色肯定不够，还得配合font-family换成等宽字、color调深一点、甚至加个浅灰色边框。
我记得有次给一个在线代码编辑器做插件，光调试这仨属性就调了俩钟头，最后效果倒是挺专业。

现在回头看，选哪种方式得看场景。
要是做那种需要AI分析语义的系统（比如知识图谱构建），mark标签肯定比span强；但要是纯设计需求，比如给活动文案加个渐变高亮边框，那还是CSS更顺手。
我当时也没想明白为啥有些网站用mark标签时背景色又黄又半透明，后来发现是加了opacity属性在捣鬼，这细节确实得细品。

html5页面怎么引用字体ttf文件

说白了，在HTML5 页面中引用TTF字体文件其实很简单。
先说最重要的，你需要准备字体文件，然后在CSS文件中配置@fontface规则引入字体，最后在HTML文件中应用这个字体。
去年我们跑的那个项目，大概3 000量级，每个页面都用了自定义字体，效果非常好。

具体来说，你需要在项目目录中新建一个名为fonts的文件夹，把TTF字体文件放进去。
另外一点，创建一个style.css文件，用@fontface规则引入字体，记得替换yourfontfile.ttf为你的字体文件名。
还有个细节挺关键的，就是在@fontface规则中，src的url要指向fonts文件夹中字体文件的正确路径。

我一开始也以为路径写错了，后来发现不对，原来是字体文件没有放到正确的fonts文件夹。
等等，还有个事，别忘了在HTML文件的<head>标签内引入style.css文件。

最后，在HTML的<body>部分应用自定义字体，就像这样设置

这是一段使用自定义字体的文字。

。

验证效果时，打开浏览器，如果一切设置正确，你应该能看到文字已经按照你引入的TTF字体显示。
这个点很多人没注意，其实挺坑的，所以一定要确保每个步骤都做到位。

我觉得值得试试，毕竟自定义字体可以让页面看起来更有个性，而且操作并不复杂。

HTML5代码如何优化字体渲染 HTML5代码中font-display属性设置

说实话，搞懂HTML5 字体渲染这事儿，我当初也是抓瞎了好一阵子。
不过后来慢慢摸索，发现关键就那几招，用对了页面加载那叫一个丝滑。

先说font-display属性，这玩意儿简直是救星。
我记得当年做项目时，试过swap值，结果用户反馈说文本突然跳来跳去像打字机似的，体验极差。
后来改用fallback，那感觉立马就不一样了——先给你个备用字体应急，等正式字体加载好了再平滑过渡。
我当时测试过，切换时间控制在1 00毫秒内，用户根本察觉不到。
有意思的是，optional这招更绝，特别适合那些非核心字体，比如注释或者说明文字，浏览器看网速快慢自己决定要不要加载，省心。

不过光靠font-display还不够。
我有个案例，去年给一个电商网站做优化，他们用的还是老掉牙的TTF格式，结果加载速度慢得离谱。
后来强制换成WOFF2 ，文件大小直接减半，加载时间肉眼可见地缩短了。
这就像压缩图片，道理是一样的。
而且得用预加载，我常用这个姿势：<link rel="preload" href="main-font.woff2 " as="font" type="font/woff2 " crossorigin>。
记得要加crossorigin属性，不然有些浏览器会给你整幺蛾子。

最骚的操作是字体子集化。
有次给一个双语网站做适配，直接把非拉丁字母的字符都抠出来单独打包，结果页面加载速度提升3 0%。
我用过Glyphhanger这工具，操作简单，生成的文件还挺小。
当然，前提是你得知道你的用户主要用哪种语言，比如中文网站肯定要包中文汉字，英文网站就包拉丁字母。

说到这儿得提FOIT和FOUT。
我之前接手过一个旧项目，FOIT搞得用户直喊卡顿，文本一闪一闪的。
后来排查才发现是font-display设成了block。
改用fallback立马解决了。
FOUT也类似，以前用swap导致备用字体特别丑，等正式字体加载好又变回来，用户看着都懵。
现在都是fallback和optional组合拳，既保证可读性，又能慢慢加载正式字体。

最后说点实在的，核心品牌字体可以稍微冒险用swap，毕竟品牌形象重要。
但正文内容千万别，直接fallback。
辅助文字就随便optional了。
测试的时候我用Lighthouse，发现字体加载那块儿居然占了一半的渲染时间，这还不优化等什么？
其实吧，字体优化这事儿就像调酒，得各种技术混搭才好喝。
预加载是基酒，WOFF2 是甜味剂，子集化是提味，font-display就是调酒师，得知道怎么把握火候。
用对了，用户根本不知道你动了字体，但确实感觉快了。

html中的<font>标签是什么意思

说到HTML的文本样式标记，这事儿我还真有点经验。
记得我刚入行那会儿，那时候用得最多的就是那个<font>标签，那玩意儿简直就是网页美化的神器。

说实话，那个<font>标签，它就像是个多面手，能控制字体、字号、颜色，让网页看起来丰富多彩。
比如，你想让一段文字看起来更正式，就用微软雅黑；要是想让它活泼点，黑体或者宋体就挺不错。
不过，有意思的是，随着HTML5 的兴起，这些属性慢慢就被淘汰了。

我记得那时候，我还在一个论坛上看到一个帖子，有人问为什么他的网页上字体颜色总是不显示。
我当时也没想明白，后来才知道，原来HTML5 已经不支持这些属性了。
现在，更多的时候，我们都是用CSS来控制样式。

说回那个<font>标签，它有几个常用的属性，比如color、face和size，这些在HTML5 里都不再支持了。
不过，它还有一些标准属性，比如class、dir、id、lang、style和title，这些在现在依然有用。

举个例子，我之前帮一个朋友改过一个网页，他想要设置一段文字的颜色。
我那时候就直接用CSS来写，比如这样：
css .text-color { color: red; }
然后在HTML里，我就这样用：

这是一段红色的文字。


这样，网页上的文字颜色不就设置好了吗？简单又方便。

总的来说，虽然那个<font>标签已经不再是主流，但了解它的历史和用法，对我们这些老司机来说，还是挺有必要的。
毕竟，有时候回忆一下过去，也能让我们更好地理解现在。