Font

SpreadJS provides a rich font style, such as font, font style, bold, italic, and so on.

Description
app.js
index.html
data.js
styles.css
Copy to CodeMine

You can customize the font style using code such as the following:

    sheet.getCell(1, 1).text('FontStyle').font('italic bold 15px/30px Georgia');

You can customize the font by splitted font properties using code such as the following:

    sheet.getCell(1, 1).fontStyle('italic');
    sheet.getCell(1, 1).fontWeight('bold');
    sheet.getCell(1, 1).fontSize('18px');
    sheet.getCell(1, 1).fontFamily('Arial');

You can also set text decorations, such as underline, doubleUnderline, lineThrough, and overline

    var style = new GC.Spread.Sheets.Style();
    style.textDecoration = GC.Spread.Sheets.TextDecorationType.doubleUnderline;
    sheet.setStyle(1,1,style);

You can set the font alignment like this:

    sheet.getCell(1, 1).text('Align').vAlign(GC.Spread.Sheets.VerticalAlign.top).hAlign(GC.Spread.Sheets.HorizontalAlign.left);

You can set the font color and cell background color like this:

    sheet.getCell(1, 1).text('Forecolor').foreColor('red');
    sheet.getCell(1, 1).text('BackColor').backColor('red');

You can set the font format, such as wordwrap, indent, shrinkToFit, etc.

    sheet.getCell(1, 1).text('WordWrap').wordWrap(true);
    sheet.getCell(1, 1).text('Indent').textIndent(1);
    sheet.getCell(1, 1).text('ShrinkToFit').shrinkToFit(true);
You can customize the font style using code such as the following: You can customize the font by splitted font properties using code such as the following: You can also set text decorations, such as underline, doubleUnderline, lineThrough, and overline You can set the font alignment like this: You can set the font color and cell background color like this: You can set the font format, such as wordwrap, indent, shrinkToFit, etc.
function setSettings(spread) { let sheet = spread.getActiveSheet(); let activeCell = sheet.getCell(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); document.getElementById('font').value = activeCell.font(); document.getElementById('fontStyle').value = fontStyleOrFontWeightSpreadValueToCssValue(activeCell.fontStyle()); document.getElementById('fontWeight').value = fontStyleOrFontWeightSpreadValueToCssValue(activeCell.fontWeight()); let fontSize = activeCell.fontSize(); if (fontSize) { let fontSizeDigit = parseFloat(fontSize); let fontSizeUnit = fontSize.substring(('' + fontSizeDigit).length); document.getElementById('fontSize').value = fontSizeDigit; document.getElementById('fontSizeUnit').value = fontSizeUnit; } else { document.getElementById('fontSize').value = ''; document.getElementById('fontSizeUnit').value = 'px'; } document.getElementById('fontFamily').value = activeCell.fontFamily() || ''; } function fontStyleOrFontWeightCssValueToSpreadValue(value) { // transfer css font style/weight to spread font style/weight if (value === '') { return undefined; } else if (value === 'normal') { return null; } else { return value; } } function fontStyleOrFontWeightSpreadValueToCssValue(value) { // transfer spread font style/weight to css font style/weight if (value === undefined) { return ''; } else if (value === null) { return 'normal'; } else { return value; } } function setFontToSelectedRanges(spread, setFunc) { let activeSheet = spread.getActiveSheet(); let selections = activeSheet.getSelections(); if (!selections) { return; } activeSheet.suspendPaint(); for (let i = 0; i < selections.length; i++) { let selection = selections[i]; if (!selection) { return; } for (let r = 0; r < selection.rowCount; r++) { for (let c = 0; c < selection.colCount; c++) { let cell = activeSheet.getCell(r + selection.row, c + selection.col); setFunc(cell); } } } activeSheet.resumePaint(); } function setFontBySplittedFont(spread) { let fontStyle = document.getElementById('fontStyle').value, fontWeight = document.getElementById('fontWeight').value, fontFamily = document.getElementById('fontFamily').value, fontSizeDigit = document.getElementById('fontSize').value, fontSizeUnit = document.getElementById('fontSizeUnit').value, fontSize; if (fontSizeDigit) { fontSize = fontSizeDigit + (fontSizeUnit ? fontSizeUnit : 'px'); } setFontToSelectedRanges(spread, (cell) => { cell.fontStyle(fontStyleOrFontWeightCssValueToSpreadValue(fontStyle)); cell.fontWeight(fontStyleOrFontWeightCssValueToSpreadValue(fontWeight)); cell.fontSize(fontSize); cell.fontFamily(fontFamily); }); setSettings(spread); } function setFontByFont(spread) { let font = document.getElementById('font').value; setFontToSelectedRanges(spread, (cell) => { cell.font(font); }); setSettings(spread); } function setStyles(sheet) { sheet.suspendPaint(); //Font sheet.getCell(2, 0).font('italic normal 12px Mangal'); sheet.getCell(4, 0).font('normal bold 15px Arial Black'); sheet.getCell(6, 0).font('normal normal 18px Georgia'); //FontFamily sheet.getCell(2, 1).fontFamily('Mangal'); sheet.getCell(4, 1).fontFamily('Arial Black'); sheet.getCell(6, 1).fontFamily('Georgia'); //FontSize sheet.getCell(2, 2).fontSize('12px'); sheet.getCell(4, 2).fontSize('20px'); sheet.getCell(6, 2).fontSize('28px'); //Bold sheet.getCell(2, 3).fontWeight('bold'); sheet.getCell(4, 3).fontWeight('normal'); //Italic sheet.getCell(2, 4).fontStyle('italic'); sheet.getCell(4, 4).fontStyle('normal'); //Line sheet.getCell(2, 5).textDecoration(GC.Spread.Sheets.TextDecorationType.underline); sheet.getCell(4, 5).textDecoration(GC.Spread.Sheets.TextDecorationType.doubleUnderline); sheet.getCell(6, 5).textDecoration(GC.Spread.Sheets.TextDecorationType.lineThrough); sheet.getCell(8, 5).textDecoration(GC.Spread.Sheets.TextDecorationType.overline); //Align sheet.getCell(2, 6).vAlign(GC.Spread.Sheets.VerticalAlign.top).hAlign(GC.Spread.Sheets.HorizontalAlign.left); sheet.getCell(4, 6).vAlign(GC.Spread.Sheets.VerticalAlign.center).hAlign(GC.Spread.Sheets.HorizontalAlign.center); sheet.getCell(6, 6).vAlign(GC.Spread.Sheets.VerticalAlign.bottom).hAlign(GC.Spread.Sheets.HorizontalAlign.right); //Forecolor sheet.getCell(2, 7).foreColor('#F7A711'); sheet.getCell(4, 7).foreColor('#82BC00'); sheet.getCell(6, 7).foreColor('#C3C3C3'); //backgroundColor sheet.getCell(2, 8).backColor('#F7A711'); sheet.getCell(4, 8).backColor('#82BC00'); sheet.getCell(6, 8).backColor('#C3C3C3'); //WordWrap sheet.getCell(2, 9).wordWrap(true); sheet.getCell(3, 9).wordWrap(true); //Indent sheet.getCell(2, 10).textIndent(1); sheet.getCell(4, 10).textIndent(3); sheet.getCell(6, 10).textIndent(-2); //ShrinkToFit sheet.getCell(2, 11).shrinkToFit(true).vAlign(GC.Spread.Sheets.VerticalAlign.center); sheet.getCell(4, 11).shrinkToFit(true).vAlign(GC.Spread.Sheets.VerticalAlign.bottom); sheet.resumePaint(); } window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss')); var sheet = spread.getActiveSheet(); sheet.fromJSON(jsonData); setStyles(sheet); setSettings(spread); bindEvents(spread); }; function bindEvents(spread) { document.getElementById("set-splitted-font").addEventListener('click', function () { setFontBySplittedFont(spread); }); document.getElementById("set-font").addEventListener('click', function () { setFontByFont(spread); }); spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function () { setSettings(spread); }); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <p>Select a cell, Set font for it.</p> <div class="settings-row"> <label for="fontStyle">Font Style:</label> <input id="fontStyle" type="text"> </div> <div class="settings-row"> <label for="fontWeight">Font Weight:</label> <input id="fontWeight" type="text"> </div> <div class="settings-row"> <label for="fontSize">Font Size:</label> <input id="fontSize" type="number" min="0"> <select id="fontSizeUnit"> <option value="px">px</option> <option value="pt">pt</option> </select> </div> <div class="settings-row"> <label for="fontFamily">Font Family:</label> <input id="fontFamily" type="text"> </div> <div class="settings-row"> <button id="set-splitted-font" class="settings-btn">Set Font Using Font Properties</button> </div> <br/> <div class="settings-row"> <label for="font">Font:</label> <input type="text" id="font"> </div> <div class="settings-row"> <button id="set-font" class="settings-btn">Set Font By Font</button> </div> </div> </div> </body> </html>
var jsonData = { "name": "Sheet1", "isSelected": true, "activeRow": 10, "activeCol": 5, "visible": 1, "theme": "Office", "data": { "dataTable": { "1": { "0": { "value": "Font", "style": { "backColor": "#82bc00", "foreColor": "white" } }, "1": { "value": "FontFamily", "style": { "backColor": "#82bc00", "foreColor": "white" } }, "2": { "value": "FontSize", "style": { "backColor": "#82bc00", "foreColor": "white" } }, "3": { "value": "Bold", "style": { "backColor": "#82bc00", "foreColor": "white" } }, "4": { "value": "Italic", "style": { "backColor": "#82bc00", "foreColor": "white" } }, "5": { "value": "TextDecoration", "style": { "backColor": "#82bc00", "foreColor": "white" } }, "6": { "value": "Align", "style": { "backColor": "#82bc00", "foreColor": "white" } }, "7": { "value": "ForeColor", "style": { "backColor": "#82bc00", "foreColor": "white" } }, "8": { "value": "BackgroundColor", "style": { "backColor": "#82bc00", "foreColor": "white" } }, "9": { "value": "WordWrap", "style": { "backColor": "#82bc00", "foreColor": "white" } }, "10": { "value": "Indent", "style": { "backColor": "#82bc00", "foreColor": "white" } }, "11": { "value": "ShrinkToFit", "style": { "backColor": "#82bc00", "foreColor": "white" } } }, "2": { "0": { "value": "Font" }, "1": { "value": "FontFamily" }, "2": { "value": "FontSize" }, "3": { "value": "Bold" }, "4": { "value": "Italic" }, "5": { "value": "UnderLine" }, "6": { "value": "Align" }, "7": { "value": "Forecolor" }, "8": { "value": "BackColor" }, "9": { "value": "Word-Wrap Word-Wrap Word-Wrap" }, "10": { "value": "Indent" }, "11": { "value": "This is a long text" } }, "3": { "9": { "value": "Word\r\nWrap" } }, "4": { "0": { "value": "Font" }, "1": { "value": "FontFamily" }, "2": { "value": "FontSize" }, "3": { "value": "Bold" }, "4": { "value": "Italic" }, "5": { "value": "DbUnderLine" }, "6": { "value": "Align" }, "7": { "value": "Forecolor" }, "8": { "value": "BackColor" }, "10": { "value": "Indent" }, "11": { "value": "ShrinkToFit" } }, "6": { "0": { "value": "Font" }, "1": { "value": "FontFamily" }, "2": { "value": "FontSize" }, "5": { "value": "lineThrough" }, "6": { "value": "Align" }, "7": { "value": "Forecolor" }, "8": { "value": "BackColor" }, "10": { "value": "Indent" } }, "8": { "5": { "value": "overline" } } }, "defaultDataNode": { "style": { "themeFont": "Body" } } }, "rowHeaderData": { "defaultDataNode": { "style": { "themeFont": "Body" } } }, "colHeaderData": { "defaultDataNode": { "style": { "themeFont": "Body" } } }, "rows": [ null, null, { "size": 50 }, { "size": 50 }, { "size": 50 }, null, { "size": 50 } ], "columns": [ { "size": 120 }, { "size": 120 }, { "size": 120 }, null, null, { "size": 100 }, { "size": 100 }, null, { "size": 120 }, { "size": 80 }, { "size": 80 }, { "size": 100 } ], "defaultData": {}, "leftCellIndex": 0, "topCellIndex": 0, "selections": { "0": { "row": 10, "col": 5, "rowCount": 1, "colCount": 1 }, "length": 1 }, "rowOutlines": { "items": [] }, "columnOutlines": { "items": [] }, "cellStates": {}, "states": {}, "outlineColumnOptions": {}, "autoMergeRangeInfos": [], "shapeCollectionOption": { "snapMode": 0 }, "printInfo": { "paperSize": { "width": 850, "height": 1100, "kind": 1 } } }
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } label { display: inline-block; width: 80px; } .settings-row { width: 100%; height: 30px; font-size: 13px; } .settings-btn { display: inline-block; width: 220px; height: 21px; } #fontSize { width: 80px; } .settings-row input { width: 160px; }