Fix#1117

src/renderer/BaseRenderLayer.ts

@@ -201,7 +201,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param color The color of the character.
    */
   protected fillCharTrueColor(terminal: ITerminal, charData: CharData, x: number, y: number): void {
-    this._ctx.font = `${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`;
+    this._ctx.font = this._getFont(terminal, false);
     this._ctx.textBaseline = 'top';
     this._clipRow(terminal, y);
     this._ctx.fillText(
@@ -230,7 +230,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
       colorIndex = fg + 2;
     } else {
       // If default color and bold
-      if (bold && terminal.options.enableBold) {
+      if (bold) {
         colorIndex = 1;
       }
     }
@@ -252,7 +252,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
       }
 
       // Draw the non-bold version of the same color if bold is not enabled
-      if (bold && !terminal.options.enableBold) {
+      if (bold) {
         // Ignore default color as it's not touched above
         if (colorIndex > 1) {
           colorIndex -= 8;
@@ -289,10 +289,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    */
   private _drawUncachedChar(terminal: ITerminal, char: string, width: number, fg: number, x: number, y: number, bold: boolean, dim: boolean): void {
     this._ctx.save();
-    this._ctx.font = `${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`;
-    if (bold && terminal.options.enableBold) {
-      this._ctx.font = `bold ${this._ctx.font}`;
-    }
+    this._ctx.font = this._getFont(terminal, bold);
     this._ctx.textBaseline = 'top';
 
     if (fg === INVERTED_DEFAULT_COLOR) {
@@ -332,5 +329,16 @@ export abstract class BaseRenderLayer implements IRenderLayer {
         this._scaledCellHeight);
     this._ctx.clip();
   }
+
+  /**
+   * Gets the current font.
+   * @param terminal The terminal.
+   * @param isBold The font weight that should be used uses terminal option as fallback.
+   */
+  private _getFont(terminal: ITerminal, isBold: boolean): string {
+    const fontWeight = isBold ? terminal.options.fontWeightBold : terminal.options.fontWeight;
+
+    return `${fontWeight} ${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`;
+  }
 }
 

src/renderer/CharAtlas.ts

@@ -12,6 +12,8 @@ export const CHAR_ATLAS_CELL_SPACING = 1;
 interface ICharAtlasConfig {
   fontSize: number;
   fontFamily: string;
+  fontWeight: string;
+  fontWeightBold: string;
   scaledCharWidth: number;
   scaledCharHeight: number;
   colors: IColorSet;
@@ -64,7 +66,7 @@ export function acquireCharAtlas(terminal: ITerminal, colors: IColorSet, scaledC
   }
 
   const newEntry: ICharAtlasCacheEntry = {
-    bitmap: generator.generate(scaledCharWidth, scaledCharHeight, terminal.options.fontSize, terminal.options.fontFamily, colors.background, colors.foreground, colors.ansi),
+    bitmap: generator.generate(scaledCharWidth, scaledCharHeight, terminal.options.fontSize, terminal.options.fontFamily, terminal.options.fontWeight, terminal.options.fontWeightBold, colors.background, colors.foreground, colors.ansi),
     config: newConfig,
     ownedBy: [terminal]
   };
@@ -86,6 +88,8 @@ function generateConfig(scaledCharWidth: number, scaledCharHeight: number, termi
     scaledCharHeight,
     fontFamily: terminal.options.fontFamily,
     fontSize: terminal.options.fontSize,
+    fontWeight: terminal.options.fontWeight,
+    fontWeightBold: terminal.options.fontWeightBold,
     colors: clonedColors
   };
 }
@@ -98,6 +102,8 @@ function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean {
   }
   return a.fontFamily === b.fontFamily &&
       a.fontSize === b.fontSize &&
+      a.fontWeight === b.fontWeight &&
+      a.fontWeightBold === b.fontWeightBold &&
       a.scaledCharWidth === b.scaledCharWidth &&
       a.scaledCharHeight === b.scaledCharHeight &&
       a.colors.foreground === b.colors.foreground &&
@@ -126,7 +132,7 @@ class CharAtlasGenerator {
     this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
   }
 
-  public generate(scaledCharWidth: number, scaledCharHeight: number, fontSize: number, fontFamily: string, background: string, foreground: string, ansiColors: string[]): HTMLCanvasElement | Promise<ImageBitmap> {
+  public generate(scaledCharWidth: number, scaledCharHeight: number, fontSize: number, fontFamily: string, fontWeight: string, fontWeightBold: string, background: string, foreground: string, ansiColors: string[]): HTMLCanvasElement | Promise<ImageBitmap> {
     const cellWidth = scaledCharWidth + CHAR_ATLAS_CELL_SPACING;
     const cellHeight = scaledCharHeight + CHAR_ATLAS_CELL_SPACING;
     this._canvas.width = 255 * cellWidth;
@@ -137,7 +143,7 @@ class CharAtlasGenerator {
 
     this._ctx.save();
     this._ctx.fillStyle = foreground;
-    this._ctx.font = `${fontSize * window.devicePixelRatio}px ${fontFamily}`;
+    this._ctx.font = `${fontWeight} ${fontSize * window.devicePixelRatio}px ${fontFamily}`;
     this._ctx.textBaseline = 'top';
 
     // Default color
@@ -151,7 +157,7 @@ class CharAtlasGenerator {
     }
     // Default color bold
     this._ctx.save();
-    this._ctx.font = `bold ${this._ctx.font}`;
+    this._ctx.font = `${fontWeightBold} ${fontSize * window.devicePixelRatio}px ${fontFamily}`;
     for (let i = 0; i < 256; i++) {
       this._ctx.save();
       this._ctx.beginPath();
@@ -163,11 +169,11 @@ class CharAtlasGenerator {
     this._ctx.restore();
 
     // Colors 0-15
-    this._ctx.font = `${fontSize * window.devicePixelRatio}px ${fontFamily}`;
+    this._ctx.font = `${fontWeight} ${fontSize * window.devicePixelRatio}px ${fontFamily}`;
     for (let colorIndex = 0; colorIndex < 16; colorIndex++) {
       // colors 8-15 are bold
       if (colorIndex === 8) {
-        this._ctx.font = `bold ${this._ctx.font}`;
+        this._ctx.font = `${fontWeightBold} ${fontSize * window.devicePixelRatio}px ${fontFamily}`;
       }
       const y = (colorIndex + 2) * cellHeight;
       // Draw ascii characters

src/renderer/TextRenderLayer.ts

@@ -33,7 +33,7 @@ export class TextRenderLayer extends BaseRenderLayer {
     super.resize(terminal, dim, charSizeChanged);
 
     // Clear the character width cache if the font or width has changed
-    const terminalFont = `${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`;
+    const terminalFont = `${terminal.options.fontWeight} ${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`;
     if (this._characterWidth !== dim.scaledCharWidth || this._characterFont !== terminalFont) {
       this._characterWidth = dim.scaledCharWidth;
       this._characterFont = terminalFont;