MapLibre GL JS第53课：用Web字体样式化标签

学习目标掌握用Web字体样式化标签的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念将Web字体应用到样式的文本标签。 完 整 代 码代码示例!DOCTYPEhtmlhtmllangenheadtitleStyle labels with Web fonts/titlemetapropertyog:descriptioncontentApply Web fonts to your style’s text labels. Unlike signed distance field (SDF) glyph sets, Web fonts are available from a variety of providers, or your can make your own using popular tools. This option is suitable for fonts that are only available through a third-party content delivery network (CDN) for technical or legal reasons, as well as fonts that are incompatible with SDF, such as variable fonts. For compatibility with Android and iOS applications, specify equivalent fonts in the style’s font-faces property.metapropertyog:createdcontent2025-10-31/metacharsetutf-8metanameviewportcontentwidthdevice-width, initial-scale1linkrelstylesheethrefhttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.cssscriptsrchttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.js/scriptlinkrelpreconnecthrefhttps://fonts.googleapis.comlinkrelpreconnecthrefhttps://fonts.gstatic.comcrossoriginlinkhrefhttps://fonts.googleapis.com/css2?familyRampartOneamp;displayswaprelstylesheetstylebody{margin:0;padding:0;}html, body, #map{height:100%;}/style/headbodydividmap/divscriptdocument.fonts.load(24px Rampart One);constmapnewmaplibregl.Map({container:map,zoom:9,center:[137.9150899566626,36.25956997955441],style:{version:8,sources:{satellite:{type:raster,tiles:[https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/g/{z}/{y}/{x}.jpg],tileSize:256},places:{type:geojson,data:{type:FeatureCollection,features:[{type:Feature,properties:{name:Azumino},geometry:{type:Point,coordinates:[137.9054972,36.3044083]}},{type:Feature,properties:{name:Matsumoto},geometry:{type:Point,coordinates:[137.9687141,36.2382047]}}]}}},layers:[{id:satellite,type:raster,source:satellite},{id:places,type:symbol,source:places,layout:{text-font:[Rampart One],text-size:24,text-field:[get,name]},paint:{text-color:white}}]}});/script/body/html 代码解析1. 初始化地图使用new maplibregl.Map()创建地图实例配置了卫星影像底图和GeoJSON点数据源。关键点在于通过内联样式对象配置地图而非使用外部样式URL。2. 关键配置项document.fonts.load(): 预先加载Web字体确保字体在地图渲染前可用text-font: 指定使用的Web字体名称如Rampart Onetext-field: 使用表达式[get, name]从GeoJSON属性中获取标签文本text-color: 设置标签颜色为白色与卫星底图形成对比⚙️ 参数说明参数类型必填说明text-fontarray是指定字体名称数组支持回退机制text-sizenumber是标签字体大小像素text-fieldexpression是定义标签显示内容的表达式text-colorstring否标签颜色默认黑色 效果说明运行代码后地图显示日本松本市和安曇野市区域的卫星影像底图在两个标记点上方显示白色的地名标签字体使用Google Fonts提供的Rampart One字体呈现独特的手写风格。 常 见 问 题Q1: Web字体显示为默认字体怎么办A:检查以下几点确认已在HTML中引入字体链接如Google Fonts的link标签使用document.fonts.load()确保字体加载完成后再渲染检查字体名称是否正确注意大小写敏感Q2: Web字体在移动端不显示A:某些移动浏览器对Web字体支持有限建议在style的font-faces属性中指定fallback字体考虑使用系统字体作为备选使用font-display: swap提高加载体验Q3: 如何确保字体加载性能A:使用document.fonts.readyPromise等待字体加载完成document.fonts.ready.then((){// 字体已加载初始化地图}); 练习任务基础练习尝试更换为其他Google Fonts字体如Roboto、Open Sans进阶挑战添加多个不同字体的标签层展示字体效果差异拓展思考如何实现根据缩放级别动态切换字体大小综合实践创建一个支持中英文双语标签的地图使用不同字体 最佳实践字体预加载: 使用document.fonts.load()或font-display: swap避免FOITFlash of Invisible Text字体回退: 在text-font数组中按优先级排列多个字体确保兼容性跨平台兼容: 为Android和iOS应用在style的font-faces中指定等效字体性能优化: 只加载必要的字重和字符集减少字体文件大小对比度保证: 标签颜色与底图要有足够对比度确保可读性 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识