如何在Lightbox中更改字幕字体？

Question

I am using jQuery developed about lightboxes , and it is amazing. However, I saw that the font of the captions and it don't fit to my website style... I wanted to know if someone had an idea about how to change the webfont of this captions...

Answer 1

Font is changed by targeting the parent div and child element class or attribute and then specifying the font family.

eg

<div class="light-box-sample">
    <p>  this could be a text</p>
</div>

Your CSS should look like

.light-box-sample p {
   font-family: 'open sans' sans-serif;
}

Note : targeting .light-box-sample wont do the magic, the child element should be targeted also.

if there was no child element then the parent div could be targeted.

in the above CSS the first font indicates the universal font, and the double quote is used when the font has a space between its name literally like your first font choice , second font indicates a backup font that's located on all PC.

Generally you need to first download your font, and install locally on your PC to see the effect on your development environment and when you are done changing what you want to , you could add the CDN link of the font to the head section or whatever way to your design, so users who doesn't have that font installed on there computer could also see the font manifest.

hope this was helpful :-)

Answer 2

Enter code into lightbox.min.css to change caption font attributes:

.lb-caption {
font-size: 24px !important;
color: #727fee !important;
font-family: helvetica !important;
}

.lb-number {
color: red !important;
}

(.lb-number will change page number attributes)