Set font family in TVML

In my TVML app I am able to set font style properties such as font-size and font-weight using tv-text-style:none, however I am not able to set the font-family property, which seems to be ignored:

var Template = function() { return `<?xml version="1.0"    encoding="UTF-8" ?>  
<document>  
    <head>  
        <style>  
            .customText {  
                tv-text-style: none;  
                tv-position: center;  
                color: white;  
                font-size: 40px;  
                font-weight: bold;  
                font-family: Courier;  
            }  
        </style>  
    </head>  
    <paradeTemplate>  
...  
                <listItemLockup>  
                    <title>Title</title>  
                    <relatedContent>  
                         <divTemplate>  
                             <title class="customText">abcABC</title>  
                         </divTemplate>  
                    </relatedContent>  
                </listItemLockup>  
...

Can I set a font-family different from the system font family?

Thanks for your help,

Luca

font-family is now available in TVML. No need to use TVInterfaceFactory for custom font support anymore.

Example:

tv-text-style: 'none'
font-family: 'Times New Roman'

Apple TV Markup Language Reference: font-family

If you want to use custom font for your title, you should implement custom TVViewElement that will use any font. First of all, you need to implement your own TVInterfaceFactory , it can be done like that (Swift 2 solution for tvOS 9):

import UIKit
import TVMLKit

class MyFactory: TVInterfaceFactory {

    override func viewForElement(element: TVViewElement, existingView: UIView?) -> UIView? {

        switch element {

        case let element as MyText where element.elementName == "myCustomText":
            let view = MyTextView(frame: CGRectMake(0,0,100,50))
            view.text = "my text"
            return view

        default:

            break
        }
        return nil
    }
}

After that you need to implement a custom TVML-item:

class MyText: TVTextElement {

    override var elementName: String {

        return "myCustomText"
    }

    var text: String? {

        guard let textValue = attributes?["text"] else { return nil }
        return textValue
    }
}

And now you need to implement UIView for your TVTextElement:

class MyTextView: UIView {

    var label: UILabel!

    override init(frame: CGRect) {

        super.init(frame: frame)
    }

    var text : String {
        get {

            return self.text
        }
        set(value) {

            self.label = UILabel(frame: self.frame)
            self.label.text = value
            self.label.textColor = UIColor.whiteColor()
            self.label.font = UIFont(name: "Your custom font", size: 20.0)
            self.addSubview(self.label)
        }
    }

    required init?(coder aDecoder: NSCoder) {

        fatalError("init(coder:) has not been implemented")
    }
}

Now you can use your custom item in TVML like that:

<myCustomText text="hello world"></myCustomText>

Also, don't forget to register you custom item in didFinishLaunchingWithOptions method:

TVInterfaceFactory.sharedInterfaceFactory().extendedInterfaceCreator = MyFactory()
TVElementFactory.registerViewElementClass(MyText.self, forElementName: "myCustomText")

来源：https://stackoverflow.com/questions/35734894/set-font-family-in-tvml

标签

fonts

tvos

font-family

tvml