Font

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

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; }