How can I set the font size?

[shamoons]

Weird question, I know. I'm trying to use vue-bootstrap badges:

      <vue-word-cloud
        v-if="topics"
        :words="topics.map((topic) => [topic.text, parseInt(topic.weight * 10)])"
        style="width: 100%; height: 200px;"
        :font-size-ratio="2"
        font-family="Roboto"
      >
        <template slot-scope="{text, weight}">
          <div>
            <b-badge variant="primary">{{ text }}</b-badge>
          </div>
        </template>
      </vue-word-cloud>

and it kind of works:

But I'd like to make it all smaller. If I specify a font-style, then all of the items have the same size.

[SeregPie]

Hello. Try this.

<template slot-scope="{text, weight}">
  <b-badge variant="primary">
    <span style="font-size: 0.5em;">{{ text }}</span>
  </b-badge>
</template>

[shamoons]

Better, but it adds spacing. I need the badge to be smaller.

If I do:

      <vue-word-cloud
        v-if="topics"
        :words="topics.map((topic) => [topic.text, parseInt(topic.weight * 10)])"
        style="width: 100%; height: 200px;"
        :font-size-ratio="2"
        font-family="Roboto"
      >
        <template slot-scope="{text}">
          <div>
            <span style="font-size: 0.5rem;">
              <b-badge variant="primary">{{ text }}</b-badge>
            </span>
          </div>
        </template>
      </vue-word-cloud>

then it's too small:

[SeregPie]

change rem to em in your last example.

[shamoons]

      <vue-word-cloud
        v-if="topics"
        :words="topics.map((topic) => [topic.text, parseInt(topic.weight * 10)])"
        style="width: 100%; height: 200px;"
        font-family="Segoe UI, Roboto"
      >
        <template slot-scope="{text}">
          <div>
            <span style="font-size: 0.5em;">
              &nbsp;
              <b-badge pill variant="primary">{{ text }}</b-badge>
            </span>
          </div>
        </template>
      </vue-word-cloud>

Closer. But there's way too much spacing still. I tried messing with :spacing="0" but that seems to have had no effect.

[SeregPie]

try to adjust the font-size to 0.6em or 0.7em.

[shamoons]

Can I set a class on vue-word-cloud?

[SeregPie]

don't know. try it out.