Есть ли способ изменить размер шрифта в веб-чате с помощью CSS или C # в среде бота?

Я хочу, чтобы размеры шрифтов во всех веб-чатах, использующих бот-сервисы Microsoft, были одинаковыми. Размер шрифта по умолчанию для разных элементов не одинаков, из-за чего веб-чат выглядит странно.

Полнофункциональный пакет с полифилами ES5, пример можно найти здесь: https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/01.b.getting-started-es5-bundle

Я пытался изменить размер шрифта с помощью css, используя

*  { 
    font-size: 13px;
   }

однако этого не произошло после того, как я развернул страницу, на которой размещался чат-бот на сервере.

Все, что я хочу, - это чтобы размер шрифта был одинаковым для всех моих карточек и текстовых блоков.


c# botframework azure-bot-service web-chat
person manny    schedule 08.08.2019    source источник
comment
Можете ли вы опубликовать изображение, показывающее шрифты разного размера и элементы диалога: карточки, простые сообщения и т. Д.?   -  person Steven Kanberg    schedule 13.08.2019

Ответы (2)


arrow_upward
1
arrow_downward

Вам не нужно изменять размер шрифта через styleOptions. Вы можете сделать это, просто изменив элемент веб-чата и все его дочерние элементы с помощью CSS, например:

<style>
  html,
  body {
      height: 100%;
    }

    body {
      margin: 0;
    }

    #webchat {
      height: 100%;
      width: 100%;
    }

  #webchat>* {
    font-size: 22px;
  }
</style>

Надеюсь на помощь!

person Steven Kanberg    schedule 16.08.2019

arrow_upward
0
arrow_downward

Оказалось, что у нас возникли проблемы с кешированием на веб-странице. После исправления этого все целевые элементы имеют соответствующий стиль. Мы использовали комбинацию styleOptions вместе с CSS для желаемого внешнего вида окна чата.

styleOptions можно найти здесь:
https://github.com/microsoft/BotFramework-WebChat/tree/master/samples/05.a.branding-webchat-styling

И здесь:
https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js

Для CSS есть определенные классы, на которые можно настроить таргетинг в окне чата, которое можно найти здесь:
https://docs.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/net-html/native-styling

person Community    schedule 30.03.2020