Блог

Главная - Вопросы по программированию - @шрифт-изменение лица Leaflet.js поведение всплывающего окна

@шрифт-изменение лица Leaflet.js поведение всплывающего окна

#javascript #leaflet #font-face

Вопрос:

У меня есть всплывающее окно в Leaflet.js который сам по себе отлично работает (с обычным шрифтом). Но когда я добавляю font-family к нему пользовательский @font-face интерфейс, всплывающее окно загружается в виде двух строк текста вместо одной.

Обновление страницы заставляет всплывающее окно снова вести себя нормально, но при первой загрузке страницы (например, при открытии новой вкладки) по умолчанию используется это странное поведение.

Я пробовал поиграть с line-height , font-size , L.popup({ min/maxWidth }) , порядком таблиц стилей и т. Д., Ни одно из которых, казалось, не работало.

<p> Тег внутри .setContent() необходим для правильного оформления всплывающего окна. Я попробовал несколько обходных путей, которые, казалось, не работали (что могло бы решить проблему).

Против

Рабочий пример

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: 'amp;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>

Заранее большое спасибо

Ответ №1:

Проблема в том, что листовка вычисляет ширину всплывающего окна до того, как шрифт будет загружен и применен к содержимому всплывающего окна. Это происходит только при первом вызове, потому что после того, как шрифт находится в кэше.

Обходной путь заключается в добавлении скрытого текста в 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.addEventListener('load', () => {
      const address = L.popup({
          className: "popup-address",
      }).setLatLng([42, 12.46])
          .setContent('<p>All roads lead to Rome</p>')
          .openOn(map);
  });

Ответ №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);
}
Метки: