Javascript @字体更改传单.js弹出行为

我在ployate.js中有一个弹出窗口，它本身可以正常工作（使用普通字体）。但是，当我通过

@font-face

向其添加自定义

字体系列时，弹出窗口将加载两行文本，而不是一行

刷新页面会使弹出窗口再次正常运行，但当第一次加载页面时（如打开新选项卡时），它默认为这种奇怪的行为

我试过玩弄
行高
，
字体大小
，
L.popup（{min/maxWidth}）
，样式表顺序等，但似乎都不起作用

.setContent（）
中的
标记是正确设置弹出窗口样式所必需的。我尝试了几种似乎都不起作用的变通方法（这可能会解决问题）

Vs



JS
const map=L.map（'map'）.setView（[41.9,12.46]，6）；
const address=L.popup({
类名：“弹出地址”，
}).setLatLng（[42,12.46]）
.setContent（“条条大路通罗马”
”）
.openOn（地图）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；

CSS
@font-face{
字体系列：“蒙特塞拉特”；
字体：斜体；
字号：500；
src:url(https://fonts.gstatic.com/s/montserrat/v15/JTUPjIg1_i6t8kCHKm459WxZOg3z_PZw.woff2)格式（'woff2'）；
unicode范围：U+0000-00FF、U+0131、U+0152-0153、U+02BB-02BC、U+02C6、U+02DA、U+02DC、U+2000-206F、U+2074、U+20AC、U+2122、U+2191、U+2193、U+2212、U+2215、U+FEFF、U+FFFD；
}
#地图{
保证金：5雷姆自动；
高度：400px；
宽度：600px；
}
.弹出地址p{
字体系列：“蒙特塞拉特”，无衬线；
}

HTML



非常感谢提前
问题是，在加载字体并应用于弹出内容之前，传单会计算弹出窗口的宽度。这仅在第一次调用时发生，因为在字体进入缓存之后

解决方法是在html中添加隐藏文本，以便从一开始就下载字体。否则，在创建/打开弹出窗口时将首次加载字体

HTML:

JS：（如果下载字体并呈现窗口，则打开弹出窗口）

window.addEventListener（'load'，（）=>{
const address=L.popup({
类名：“弹出地址”，
}).setLatLng（[42,12.46]）
.setContent（“条条大路通罗马”
”）
.openOn（地图）；
});
详细说明福克的设计回答我稍微更改了javascript，以便以后能够使用
地址上的方法：

let address=L({
类名：“弹出地址”，
}).setLatLng（[42,12.46]）
.setContent（“条条大路通罗马”
”）；
window.addEventListener（'load'，（）=>{
地址：openOn（map）；
}

<span class="font-loaded">Preload the font ... </span>

.font-loaded{
            font-family: "Montserrat", sans-serif;
            position: absolute;
            left: -100px;
            top: -100px;
        }

window.addEventListener('load', () => {
      const address = L.popup({
          className: "popup-address",
      }).setLatLng([42, 12.46])
          .setContent('<p>All roads lead to Rome</p>')
          .openOn(map);
  });