Fonts in the font list show up as Sans Serif

[dell-optiplex-790]

The fonts in the font dropdown menu are all Sans Serif even though I added them to the whitelist

Steps for Reproduction

1. Set up a FontAttributor
2. Set the whitelist property to an array of font names
3. Register the FontAttributor

Expected behavior:
The font list has every font that I added to the font array

Actual behavior:
All the fonts in the font list are Sans Serif

Platforms:

Mozilla Firefox 133.0, Windows 11 21H2

Version:

2.0.3

[si000321]

I changed the content property of ::before with reference to Quill stylesheet.

Quill Style Sheet:

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before {
    content: "Serif"
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before {
    content: "Monospace"
}

quill/packages/quill/src/assets/base.styl

Line 266 in ebe16ca

.ql-picker-label[data-value=serif]::before,

[ngd-b]

You also have to add some styles.

I configured the font-size list and add styles:

.ql-snow {
  @font-sizes: 12px, 14px, 16px, 18px;
  // 默认
  @font-default: "Normal";

  .generate-font-size(@sizes,@set-font:false) {
    each(@sizes,{
      @value: extract(@sizes,@index);
      &[data-value="@{value}"]::before{
        content:"@{value}"
      } 
      &[data-value="@{value}"]::before when (@set-font){
        font-size:@value;
      }
    });
  }

  .ql-editor {
    each(@font-sizes,{
      @value: extract(@font-sizes,@index);

      .ql-size-@{value} {
        font-size: @value;
      }
    });
  }
  .ql-picker.ql-size {
    .ql-picker-label,
    .ql-picker-item {
      &::before {
        content: @font-default;
      }
    }
    .ql-picker-label {
      .generate-font-size( @font-sizes);
    }
    .ql-picker-item {
      .generate-font-size( @font-sizes,true);
    }
  }
}

I used less to dynamically generate styles based on variables.

It works good!