@font-face 更改 Leaflet.js 弹出行为

Question

我在 Leaflet.js 中有一个弹出窗口，它本身工作正常（使用普通字体）。但是当我通过 @font-face 添加自定义 font-family 时，弹出窗口加载为两行文本而不是一行。

刷新页面会导致弹出窗口再次正常运行，但在第一次加载页面时（如打开新标签页），它默认为这种奇怪的行为。

我试过 line-height、font-size、L.popup({ min/maxWidth })、样式表顺序等。none 似乎可行。

.setContent() 内的 <p> 标签是正确设置弹出窗口样式所必需的。我尝试了几种解决方法，但似乎都不起作用（可能会解决问题）。

Vs

JS

const map = L.map('map').setView([41.9, 12.46], 6);

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

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

CSS

@font-face {
   font-family: 'Montserrat';
   font-style: italic;
   font-weight: 500;
   src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUPjIg1_i6t8kCHKm459WxZOg3z_PZw.woff2) format('woff2');
   unicode-range: 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;
}
        
#map {
   margin: 5rem auto;
   height: 400px;
   width: 600px;
}

.popup-address p {
   font-family: "Montserrat", sans-serif;
}

HTML

<div id="map"></div>

非常感谢

Answer 1

问题是，Leaflet 在加载字体并将其应用于弹出内容之前计算弹出窗口的宽度。这只会在第一次调用时发生，因为字体在缓存中之后。

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

HTML:

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

CSS：（重要的是不要使用display: none，否则元素不会被渲染，字体也不会被下载）

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

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

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

Answer 2

详细说明 Falke Designs 的答案我稍微更改了 javascript 以便稍后可以在 address 上使用方法：

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

window.addEventListener('load', () => {
   address.openOn(map);
}

@font-face 更改 Leaflet.js 弹出行为

@font-face changes Leaflet.js popup behaviour

javascript

font-face

leaflet

JS

CSS

HTML