Understanding how to use image sprites

HTML & CSS
103

Yes - but scale the image to fit. There’s no point loading a 2560 × 1440 px image if you only want it to display at 266px wide.

104

Use this as the base image:
266 x 174

Then scale the first image down to

260 x 168

105

But, if I would want them to be 2 different images, then I would need to use an image sprite for that.

or else I’d be loading 2 urls instead of a single url.

106

If you have two different images, then yes, a sprite is probably a good idea, but it shouldn’t include the text.

1 Like
107

What if it’s a user created text?

or if it’s a font that’s not widely available?

108

Sorry - I don’t understand what you mean.

We’ve been over this. You can use a web font (from Google, Font Squirrel, FontSprings, etc.) to serve a fancy font to everyone, and you also give a font family, rather than a single font, in your CSS, to provide a fall-back.

1 Like
109

Can you show me how, I never did this before.

Example:

<style>
@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
</style>

Specify in CSS

Use the following CSS rules to specify these families:

font-family: 'Slabo 27px', serif;

110

Like this?

.cover {
  height: 174px;
  margin: 0;
  background: url("https://i.imgur.com/rEI8pnu.jpg") no-repeat;
  background-size: 260px 168px;
  cursor: pointer;
  font-family: "Slabo 27px", serif;
  @import url('https://fonts.googleapis.com/css?family=Slabo+27px');
111

I’ve never used Google fonts (although I’ve used the other two, which are slightly different).

I believe this line:

@import url('https://fonts.googleapis.com/css?family=Slabo+27px');

should go on it’s own at the top of your CSS rules.

Importing just a single font size (27px) seems a bit odd to me, but that looks to be how Google does it.

1 Like
112

OK - I’ve had a look at the Google font, and I see that’s actually the name: Slabo 27px.

Remember to set a font-size rule for your text, if required. Remember, too, that by simply using “serif” as the fallback, in the absence of your chosen font (it doesn’t load for some reason, or is blocked by the user), the browser will use whatever is set by the user as its default serif font. One serif font is not necessarily the same size as another, even at the same pixel dimensions. Yet another reason why you should not try to rigidly control the size of your layout; some things are outwith your control.

3 Likes
113

Why is it not working here?

What did I do wrong?

I got it, my bad.

114

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.